Question

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)

At the moment my jQuery is as follows.

$('.qacollapsed').hide();
$('.qa').click(function () {
    $('.qacollapsed').slideToggle();
    $(this).toggleClass('active');
});

Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)

Is there a way for it to only drop down the one that is clicked?

the HTML

<div class="qa">
<h4 class="question"> </h4>
</div>

<div class="qacollapsed">
<p>  </p>
</div>

Answer 1

It would be helpful to provide a snippet of HTML here, but I’ll take a guess at the structure of your markup for now..

Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:

$('.qa').click(function () {
   $(this)                     // start with the clicked element
       .find('.qacollapsed')   // find child .qacollapsed elements only
       .slideToggle();
   $(this).toggleClass('active');
});

This will work if .qacollapsed is inside .qa – if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.