Javascript - streamlining code
<p>I've created a rough version of a site that will pull and display hundreds of pdfs. I want to be able to bookmark each pdf once the user clicks on it. The only way I could think of doing this is the following:</p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){
      $(".pdf1").click(function(){
        if ($('#bookmark1').is(':visible')) {
                $("#bookmark1").css("display", "none");
            } else {
                $("#bookmark1").css("display", "inline");
            }                       
      });

      $(".pdf2").click(function(){
        if ($('#bookmark2').is(':visible')) {
                $("#bookmark2").css("display", "none");
            } else {
                $("#bookmark2").css("display", "inline");
            }
      });

      $(".pdf3").click(function(){
        if ($('#bookmark3').is(':visible')) {
                $("#bookmark3").css("display", "none");
            } else {
                $("#bookmark3").css("display", "inline");
            }
      });

      $(".pdf4").click(function(){
        if ($('#bookmark4').is(':visible')) {
                $("#bookmark4").css("display", "none");
            } else {
                $("#bookmark4").css("display", "inline");
            }
      });
    });
&lt;/script&gt;
</code></pre>

<p>This isn't the best because I don't want to have to create over a hundred versions of the code above with different ids for each.</p>

<p>Is there any way the code can be changed so that I don't have to duplicate this so many times?</p>
