Trying to use jQuery to show/hide multiple lists independently
<p>I have a web page where I am trying to hide extra bits of information by default. These extra bits take the form of lists of items that I want users to be able to show or hide by clicking a JavaScript link. </p>

<p>Initially, I used this code:
<a href="http://jsfiddle.net/4Yk39/2/" rel="nofollow">http://jsfiddle.net/4Yk39/2/</a></p>

<pre><code> jQuery(document).ready(function() {
   jQuery('.bhlink').click(function(){
     jQuery('ul.billhistory').slideToggle();
   });
 });
</code></pre>

<p>... and it works just fine, except that clicking any of the JavaScript links on the page causes <em>all</em> the lists to appear or disappear, which is not what I want. I want only the list right below the JavaScript link to slide out when clicked. In other words, I need the lists to appear or disappear independently.</p>

<p>The code I'm working with now (derived from the answer to another StackOverflow question) is here:
<a href="http://jsfiddle.net/smZct/" rel="nofollow">http://jsfiddle.net/smZct/</a></p>

<pre><code>$(document).ready(function () {
$(".billhistory").slideUp();
$(".bhlink").click(function() {
    var billhistory = $(this).closest("p").find(".billhistory");
        var txt = billhistory.is(':visible') ? 'Click to view' : 'Click to hide';
        $(this).text(txt);
        billhistory.stop(true, true).slideToggle("slow");
    });
});
</code></pre>

<p>As far as I can tell, everything is set up properly, but when I click the link to show a list, the link changes to say "hide", but lists do not actually appear.</p>

<p>What am I doing wrong?</p>
