Jquery several 'avalanched' checks needed for collapsed/ expander

Question

css:

#container_im.collapsed{
    background-color:red;
    height: 48px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 227px;
}

#container_im.expanded{
    background-color:green;
    height: 348px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 227px;
}

#expanded_content{
    height:100px;
    color: yellow;
    display: none;
}

//default state
//expand box
#nav.closed {
    height:20px;
    width:20px;
    background-color: black;
    color:white;
}

#nav.opened {
    height:20px;
    width:20px;
    background-color: white;
    color:black;   
}

html:

<div id="container_im" class="collapsed" >


    <div id="nav" class="closed">0</div>
    box 1 - click me    

    <div id="expanded_content">
        extra content only for collapsed state
    </div>

</div>

js:

    <div id="nav" class="closed">0</div>
    box 2 - click me    

    <div id="expanded_content">
        extra content only for collapsed state
    </div>

</div>




***//
$(document).bind("click", function(e) {
    $(e.target).closest("#container_im").toggleClass("expanded");
    $(e.target).closest("#expanded_content").show();
     $(e.target).closest("#nav").toggleClass("closed");
});***

http://jsfiddle.net/NsBWy/14/

Any JS guru that could help me fix this jquery code?

• Trying to display the text #expanded_content to display only when the selected box is clicked. And hide the complete #expanded_content div and all of its children upon another click ( toggle )
• Trying to restyle the #nav div and only the one currently clicked

Any good ideas on how to make it better are welcome also, a bit stuck on how to implement above features after trying some things from the manual its the combination of functions I don't see at this point.

Answer 1

You have lots of things wrong in your approach. Take a look at this working jsFiddle and then I'll writeup some of the things you had wrong:

http://jsfiddle.net/jfriend00/A9rKm/

$("#box").delegate(".container", "click", function(e) {
    $(this).toggleClass("expanded collapsed");
});

Things you had wrong:

1. You can only have one object with a given id so you should be using class names, not ids for common elements.
2. You can use this to access the clicked on item.
3. You don't want to be putting event handlers on the document if you can avoid it. I created a common parent that you can put the event handler on and then used .delegate() from the version of jQuery you chose (1.5) to automatically filter them for me. With jQuery 1.7+, you would use .on() instead of .delegate().
4. You can use more than one class with .toggleClass() to toggle multiple classes at once.
5. .closest() looks up the parent chain, not anywhere else. You use .find() if you're looking for children of a particular type.
6. You don't need to use so many separate classes that indicate the open/close state. One class on a common parent can be used by CSS for all children. Thus, I was able to eliminate all of the other class changes.
7. CSS comments must be of the form /* comment here */. You can't use // for CSS comments.