jQuery having trouble showing hidden elements
<p>I have some nested lists and was hoping to be able to have a "show all" button at the top, but it doesn't seem to work.</p>

<p>Any suggestions?  I know there are probably other ways of accomplishing similar things, but I was using this as an opportunity to learn more about jquery and was trying to figure out why this particular example wasn't working.</p>

<p>Here is is in action:  <a href="http://hortitude.com/samples/jquery_show_trouble.html" rel="nofollow">http://hortitude.com/samples/jquery_show_trouble.html</a></p>

<p>And the code....</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="../jquery/jquery-1.4.4.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
      $( function () {
          $("h1").click ( function () {
              var subitems = $(".bar");
              $(".bar").show();
          });
          $(".foo").click ( function () {
              var obj = $(this);
              var children = obj.children();
              $(this).children().toggle (500);
          });

      });
    &lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;show all&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li class="foo"&gt;item 1
       &lt;ul&gt; 
         &lt;li class="bar"&gt;sub-item 1&lt;/li&gt;
         &lt;li class="bar"&gt;sub-item 2&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="foo"&gt;item 2
       &lt;ul&gt; 
         &lt;li class="bar"&gt;sub-item 1&lt;/li&gt;
         &lt;li class="bar"&gt;sub-item 2&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="foo"&gt;item 3
       &lt;ul&gt; 
         &lt;li class="bar"&gt;sub-item 1&lt;/li&gt;
         &lt;li class="bar"&gt;ysub-item 2&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
