chronister Posted March 18, 2013 Share Posted March 18, 2013 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. Quote Link to comment Share on other sites More sharing options...
Jessica Posted March 18, 2013 Share Posted March 18, 2013 What doesn't work the way you expect? What debugging steps have you taken? Are you using Chrome developer tools or Firebug? Quote Link to comment Share on other sites More sharing options...
chronister Posted March 18, 2013 Author Share Posted March 18, 2013 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. Quote Link to comment Share on other sites More sharing options...
Jessica Posted March 18, 2013 Share Posted March 18, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.