JQuery Toggling Dynamically Named Objects

At the moment I have a tiered list of div boxes each holding a title. At the beginning of each title there is a - sign which when clicked hides or displays everything tiered under that div in javascript with a link.

My problem is I'd like to change it over to JQuery but don't really know where to start. I've got jquery running on the page as I've done $(document).ready(function(){alert("fubar");}); and it alerts correctly, but I don't know where to go from there.

The link on the - sign currently has an onclick function of ShowHideStuff(ChildrenOf[IDValue]) and then the div box it hides/displays is called ChildrenOf[IDValue].

Here is the javascript I'm currently using:

function ShowHideStuff(id){
    if(document.getElementById(id).style.display == "block"){
        document.getElementById(id).style.display = "none";
    }else{
        document.getElementById(id).style.display 开发者_运维技巧= "block";
    }
}

---

Do you want do the same using jQuery?

Try this:

function ShowHideStuff(id){  
   $('#'+id).toggle();
} 

---

Can I suggest first having a look at some of the jQuery docs, they're there for a reason.

http://docs.jquery.com/Main_Page

But for your problem, you need a selector for each '-' sign, which could look like this $('.minus') . Which selects any element with class='minus' (you would have to add the minus class to each '-' element.

The code would then be:

$('.minus').click(function(){
  ShowHideStuff(ChildrenOf[IDValue]);
});