Question

This is probably an incredibly silly question with an obvious answer, and I think I may be wrong in using slideToggle, but I wasn’t sure how else to do it.

Essentially, I would like a user to click on different headings to hide/reveal only the paragraph below. At the moment, if you click on any of the headings, it reveals all the hidden paragraphs.

This is the code I am currently using:

<a href="#"><div class="contenthead">
    Click here
</div></a>
<p class="content"> Lorem ipsum dolor</p>


<a href="#"><div class="contenthead">
    Click here now
</div></a>
<p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing</p>


<script>
$('.contenthead').click(function() {
    $('.content').slideToggle('slow', function() {
    // Animation complete.
    });
});
</script>

Any ideas how I can do this please?

Answer 1

Use the parent() and next() functions.

$('.contenthead').click(function() {
    $(this).parent().next().slideToggle('slow', function() {
    // Animation complete.
    });
});