passing selector name as parameter
<p>Below is simple HTML <a href="http://api.jquery.com/show/" rel="nofollow">form</a> , there are two sets of controls on the page first set, second set.. The script for first set works perfectly fine for animation. How do I make that script generic for different kind of sets. Imagine I have 30 of these sets like this I need to do the animation, how do I pass the selector name as parameter to JQuery?</p>

<pre><code>        &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
      div { background:#def3ca; margin:3px; width:80px;
      display:none; float:left; text-align:center; }
      &lt;/style&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

 &lt;!-- first set --&gt;       
      &lt;button id="showr"&gt;Show&lt;/button&gt;
      &lt;button id="hidr"&gt;Hide&lt;/button&gt;
      &lt;div&gt;who are you?&lt;/div&gt;

 &lt;!-- second set --&gt; 
     &lt;button id="showr1"&gt;Show&lt;/button&gt;
      &lt;button id="hidr1"&gt;Hide&lt;/button&gt;
      &lt;div id="div1"&gt;how are you?&lt;/div&gt;


&lt;!-- script works on First set --&gt;
    &lt;script&gt;
    $("#showr").click(function () {
      $("div").first().show("fast", function showNext() {
        $(this).next("div").show("fast", showNext);
      });
    });

    $("#hidr").click(function () {
      $("div").hide(1000);
    });
    &lt;/script&gt;



    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
