Target only one element within same classes with jQuery

Question

I have a little issue:

(function ($) {
    $(document).ready(function() {
        $(".suaugusi").click(function () {
            $(".activ-suaug, .activ-title-suaugusi").slideToggle("slow");
        });
    });
})(jQuery);

How to use code above, to make sure, taht it works only on one DIV with class .suaugusi? I have 12 div's with same classes, but i need, that it would activate only on clicked one. How to do so?

EDIT

<div class="col-md-4 col-xs-12 uzsiemimas">
  <div class="portfolio-item suaugusi">
    <div class="item-inner">
      <img class="img-responsive" src="<?php the_sub_field('nuotrauka'); ?>" alt="">
      <h4 class="activ-title-suaugusi"><?php the_sub_field('pavadinimas'); ?></h4>
      <div class="overlay"></div>
      <div class="activ-menu activ-suaug">
        <?php if( have_rows( 'uzsiemimo_veiklos') ): while ( have_rows( 'uzsiemimo_veiklos') ) : the_row(); ?>
        <a href="<?php the_sub_field('nuoroda'); ?>">
          <div class="activ-element">
            <?php the_sub_field( 'pavadinimas');?>
          </div>
        </a>
        <?php endwhile; else : endif; ?>
      </div>
    </div>
  </div>
</div>

Answer 1

You can use the this keyword within the event handler to refer to the element which raised the event, then find() to retrieve the specific elements you want to target. Try this:

(function ($) {
    $(document).ready(function() {
        $(".suaugusi").click(function () {
            $(this).find('.activ-suaug, .activ-title-suaugusi').slideToggle("slow");
        });
    });
})(jQuery);

Answer 2

As activ-suaug and activ-title-suaugusi are child elements of suaugusi you should use .find() to traverse up to them, then perform the desired operation.

Use

$(".suaugusi").click(function () {
    $(this).find(".activ-suaug, .activ-title-suaugusi").slideToggle("slow");
});