Question

I’ve got some jQuery that expands a div header when clicked to reveal a subheader. Another click on this subheader then reveals content. However there are two subheaders and I can only get the first to reveal.

I tried changing the selectors to the format recommended on stackoverflow.com/questions/1041344 but this only resulted in the subheaders not even being hidden when the page loads. This is what I’ve got so far:

jQuery:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".subheadingFrame, .subheadingEngine").hide();
    jQuery(".heading").click(function()
    {
        jQuery(this).next(".subheadingFrame, .subheadingEngine").slideToggle(500);
    });
    jQuery(".content").hide();
    jQuery(".subheadingFrame, .subheadingEngine").click(function()
    {
        jQuery(this).next(".content").slideToggle(500);
    });
});
</script>

HTML:

<div id="divSparesSubHeader" class="heading">Benelli1</div>
<div id="divSparesLastHeader" class="subheadingFrame">Frame/Subheader1</div>
<div id="divSparesItem" class="content">Content 1</div>
<div id="divSparesLastHeader" class="subheadingEngine">Engine/Subheader2</div>
<div id="divSparesItem" class="content">Content 2</div>

I’ve got the page up here if anyone could assist?

Answer 1

Try this

jQuery(".heading").click(function(){
        jQuery(this).nextAll(".subheadingFrame").first().slideToggle(500);
        jQuery(this).nextAll(".subheadingEngine").first().slideToggle(500);
});

.next() only targets the immediate sibling of .heading ..
So if it is not found it will return an empty list..

So in such cases better to target the elements using .nextAll() and .first()

Check Fiddle