Simple jquery toggles

[chronister]

Hello all, How is everybody doing today??

 

I am trying to get an unorderd list as trigger to toggle / expand some div's and I am struggling on this. Can someone point me in the right direction?

 

<div id="lost-and-found">
<ul>
    <li><span><a href="#lost">Lost Animals</a></span> 
      <ul>
        <li><a href="#lost_cats">Cats</a></li>
          <li><a href="#lost_dogs">Dogs</a></li>
      </ul>
    </li>
    
    <li><span><a href="#found">Found Animals</a></span>
      <ul>
        <li><a href="#found_cats">Cats</a></li>
        <li><a href="#found_dogs">Dogs</a></li>
      </ul>
    </li>
</ul>
<div class="clear"> </div>
</div>

<div id="found">
    
    <div id="found_cats">
      <h2>Found Cats</h2>
      <?php  display_lf($found['cat']); ?>
    </div>
    
    <div id="found_dogs">
        <h2>Found Dogs</h2>
        <?php  display_lf($found['dog']); ?>
   </div>
   
</div>

<div id="lost">
    <div id="lost_cats">
        <h2>Lost Cats</h2>
        <?php  display_lf($lost['cat']); ?>
    </div>
   
   <div id="lost_dogs">
    <h2>Lost Dogs</h2>
    <?php  display_lf($lost['dog']); ?>
  </div>
 
</div>

<script>
        $(function(){
            $('#lost_cats, #found_cats, #lost_dogs, #found_dogs').hide();
            
            $("#lost-and-found a").click(function(event) {
                var href = $(this).attr('href');
                $('#lost_cats, #found_cats, #lost_dogs, #found_dogs').hide();
                $(href).show();
                $(this).parent("div").show();
                event.preventDefault();
            });
                    
        });
    </script>


 

The ul is 2 buttons (Lost / Found) with Cat and dog under each.

 

I have a div with id of lost and one with found. Inside each, there lost cat, lost dog and found cat, found dog respectively.

I am trying to hide all sections initally with jquery and then open the lost / found section or the subsections of lost -> dog, lost  -> cat, found ->dog, found -> cat.

 

Any tips / pointers will be appreciated.

 

[Jessica]

What doesn't work the way you expect? What debugging steps have you taken? Are you using Chrome developer tools or Firebug?

[chronister]

I think I got it.. but what say ye javascript gurus....  Jessica, it was not opening the found / lost main section when the 1st level ul li item was clicked. But the 2nd level li items would show those individual sections. I have changed the jquery and it does work as intended, but I think it could be better.

 

 

 

  <script>
        $(function(){
            $('#lost_cats, #found_cats, #lost_dogs, #found_dogs').hide();
            $("#lost-and-found a").click(function(event) {
                var href = $(this).attr('href');
                $('#lost_cats, #found_cats, #lost_dogs, #found_dogs').hide();
                $(href).show();
                $(href).children().show();
                event.preventDefault();
            });
        });
    </script>
 

Not I am not using chrome dev tools or firebug (though I do have it installed.. I think)  

Is the code here ok or do you have a suggestion to make it better? I think it is probably clumsy.

[Jessica]

I would use a class on each of the items instead of listing them out like that.

 

And move the event.preventDefault() to the very beginning of that function, instead of the end.