Show/Hide elements with same class

Show/Hide elements with same class

Afternoon all,

Loving jQuery at the moment, and have sort of hit a hiccup with showing and hiding specific elements with the same class.  My idea is, what if I wanted to add a little button to show and hide the contents of a specific comment on a forum post, or blog, whatever.  This would be easily done with id's but I'd like to just apply a class to each one of them and allow them to hide their contents.  Here is the javascript and html as an example of what I am talking about.

Javascript:

  1. $(".menu ul").hide();    
  2. $(".menu").toggle(
  3. function(){
  4. $(".menu").children().show();
  5. },
  6. function(){
  7. $(".menu").children().hide();
  8. }
  9. );

HTML:

  1. <div class="menu" style="width: 150px">Menu Test
  2. <ul>
  3. <li>testing</li>
  4. <li>testing2</li>
  5. </ul>
  6. </div>
  7. <div class="menu" style="width: 150px">Menu Test
  8. <ul>
  9. <li>testing</li>
  10. <li>testing2</li>
  11. </ul>
  12. </div>
  13. <div class="menu" style="width: 150px">Menu Test
  14. <ul>
  15. <li>testing</li>
  16. <li>testing2</li>
  17. </ul>
  18. </div>
What the code currently does is shows the content of all of the ul's when you click on any of the menu divs. Only way I can think of getting around this is if I add an incrementing class to each of the elements which seems a lot more complicated than it needs to be.

Any help would be much appreciated!

Thanks much!

donkeystalk