Simple Expand/Collapse divs > JQuery?

Question

I need to add some accordian style expand/collapse handles to a series of parent container divs in my application. Is this something that's too simple for a library like jquery?

Example:

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

<div class="handleDiv"> expand | collapse
    <div>child element</div>
    <div>child element</div>
</div>

Answer 1

Try something like this:

$('.handleDiv').click(function() {
    $(this).children().toggle();
});

That'll expand or hide the contents of the "handleDiv"s whenever you click them. I'd suggest making those "expand | collapse" things links and attaching the click handler to them, though, so that a click anywhere in the div doesn't toggle it.

If you want them to start out closed, either style them closed in your stylesheet:

.handleDiv div {
    display: none;
}

or add a ".hide()" to the end of the jQuery snippet at the beginning of my answer.