I have the following markup that consists of 3 chunks of content, each containing a heading and some content:
<div class="feed-panels-expanding">
<div class="feed">
<section>
<h2><a href="#">Heading One</a></h2>
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
<div class="content">
<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
<p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</div>
</section>
<section>
<h2><a href="#">Heading Two</a></h2>
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
<div class="content">
<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
<p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</div>
</section>
<section>
<h2><a href="#">Heading Three</a></h2>
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin.</p>
<div class="content">
<p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor.</p>
<p>Lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</div>
</section>
</div>
</div>
I want it so that clicking each heading does a expands / closes the content beneath.
I'm trying to get it so that the jQuery script takes care of hiding all but the first paragraph. In order to do this, it takes the first paragraph and moves it outside of .content
. It then hides .content
// feed-panels-expanding
$('.feed-panels-expanding section').each(function() {
$(this).find('h2 a').click(function() {
$(this).parent().next('.content').slideToggle(250);
return false;
});
$(this).find('.content p:first').insertAfter($(this).find('h2'));
$(this).find('.content').hide();
});
However there's something the script really doesn't like about me moving the first p
element in each content block. If I remove that line, the script works fine and all of the panels expand / contract when the relevant heading is clicked.
But with that line of code in there, the script does nothing. I can get an alert
statement to pop up when I click the headings, but it just ignores the .content
elements
next()
looks for the next element after the one you selected. And it is no longer the content
element. The next element is the paragraph you just inserted.
$(this).parent().siblings('.content').slideToggle(250);