jQuery Forum

I have ".help" divs.
Inside the help divs is a span of class title & a span of class info

within info can be sub help divs with even more information.
The entire hierarchy is fully collapsed, and I want to know how I can make it so that I can click on the div and cause it to open up the info portion (because the title is already shown)

I was able to make it so that I can click on the spans and those will open up their sibling element of class info. But I can't get it to work for the parent  without it expanding everything.

here is the code I have working for sibling to sibling

1. $(document).ready(function() {
2.     $('.info').hide();
3.     $(".help i").each(function (){
4.     $(this).html('<span class="switch">'+$(this).html()+'</span>');
5.     //$(this).append(',');
6.     });
7.     $(".switch").click(showHideInfo);
8.     $("#startButton").click(developBoard);
9. });
10. function showHideInfo(){
11.         var infoBox=$(this).parent().siblings();
12.         if (infoBox.css("display")=="none")
13.         {
14.         infoBox.show(100);
15.         $(this).css("text-decoration","underline");
16.         }
17.         else
18.         {
19.         infoBox.hide(100);
20.         $(this).css("text-decoration","none");
21.         }
22.         //$('.info',$(this).parent()).show();
23. }
24. function developBoard(){
25. var boardWidth    ;
26. var boardHeight;
27. }
28. // the player, creatures, items and blocks are all entities
29. function entity(){
30. this.strength = 0;
31. this.weight = 0;
32. this.gravity=1;
33. }