Home/ Questions/Q 3985142
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T05:51:16+00:00

I have some nested lists and was hoping to be able to have a

  • 0

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.

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.

Here is is in action: http://hortitude.com/samples/jquery_show_trouble.html

And the code….

<html>
<head>
    <script type="text/javascript" src="../jquery/jquery-1.4.4.js"></script>

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

      });
    </script>


</head>
<body>
  <h1>show all</h1>
  <ul>
    <li class="foo">item 1
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">sub-item 2</li>
       </ul>
    </li>
    <li class="foo">item 2
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">sub-item 2</li>
       </ul>
    </li>
    <li class="foo">item 3
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">ysub-item 2</li>
       </ul>
    </li>
  </ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are hiding the <ul> elements, $(this).children() selects the <ul> elements inside the particular .foo element.
    If any ancestor of a visible element is hidden, then the element will still be hidden, thus $('.foo').show() has no effect.

    Do

    $(".foo").children().show();

    Btw. a heading element (<h1>) is not a button 😉 I suggest to use something different.

    • 0