Question

I have a simple list of FAQ’s

<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>
<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>

All I am trying to do is a toggle the visable state of the next answerr when the question is clicked.

So far I have got

   $('.qcontainer').bind("click", function (e) {
        $('.qcontainer').next('.acontainer').toggle(400);
    });

But this toggles all the items, what i want to do is just target teh answer for the clicked question. so the next item in the list from the clicked object.

Answer 1

Try like below,

$('.qcontainer').bind("click", function (e) {
    $(this).next().toggle(400);
});

For the markup you have, .next of qcontainer is acontainer and so you can simply use .next to toggle acontainer and not worry about a thing 🙂