Question

I’m using jQuery to show and hide areas on my site with just a toggle. Which works fine, but if i have multiple elements I want to show and hide individually on the page I have to write a bit of jQuery for each item. Is there a way to do it for a class or ID within the encapsulating class?

heres my jQuery:

 jQuery('.collapse').click(function() {


        jQuery('#filterArea').toggle('slow', function() {

        });

    });

And heres my content:

<div class="tabs"> 
    <div class="ui-widget-header">
        <div class="collapse" id="boxId">Content Box</div>

    </div><br />
        <div class="addPadLeftNoFloat" id="filterArea">

            <p>Content for box</p>

        </div>              
</div>

I want to be able to have a few areas on the page with the class of collapse that just close the filterArea within the outer collapse? Or similar? I’m not doing a great job of explaining this! – So if i have two divs with the class of collapse, when i click them the filterarea of that div collapses

Tom

Answer 1

Instead of having filterArea as an id, change it to a class.

<div class="tabs"> 
    <div class="ui-widget-header">
        <div class="collapse" id="boxId">Content Box</div>
    </div>

    <br />
    <div class="addPadLeftNoFloat filterArea">
        <p>Content for box</p>
    </div>              
</div>

Also change your JavaScript to this:

jQuery('.collapse').click(function() {
    jQuery('.filterArea').toggle('slow', function() {

    });
});

A working example.

Edit: if you only want to collapse .filterArea elements with the enclosing .tab element, use JavaScript something like this:

$('.collapse').click(function() {
    $(this).closest('.tabs').find('.filterArea').toggle('slow');
});

Updated example.