Geek Answers Handbook

Simple expand / collapse divs> jQuery?

I need to add some accordion extension / collapse styles to a series of parent div containers in my application. Is it 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>
+5
source share
2 answers

Try something like this:

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

This will expand or hide the contents of "handleDiv" each time you click on them. I would suggest making these links "expand | collapse" and assigning a click handler to them, so clicking anywhere in the div does not switch it.

If you want them to start closing, either erase them in your stylesheet:

.handleDiv div {
    display: none;
}

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

+1

More articles:


All Articles