Question

i have following html structure.

<p class="expandableContent" ><span class="label">Computer and Laptop Repairs</span></p>
<div style="clear: both;"> </div>
<div class="services">content</div>

<p class="expandableContent" ><span class="label">Softrware and Hardware</span></p>
<div style="clear: both;"> </div>
<div class="services">content2</div>

So i have repetetion of content1 content2 content3 etc. I am writting a toggle function so that when i click on first paragraph first content div expands. When i click on second paragraph second expands but all other open content collapses.

Can somebody help.

Answer 1

This should do the trick for you:

$(function() {
    $('.expandableContent').click(function() {
        $('.services').hide();
        $(this).nextAll('.services:first').show();
    });
});

First, you’ll hide all .services divs, then select the next one after the paragraph that was clicked, and expand it.

Here’s a demo of that in action: http://jsfiddle.net/Ender/5nYpT/