close tab using JQUERY

Question

I am trying to click on the link Open the tab but when I click Open all would have some way when I click open only the tab corresponding to what I clicked and when I click again close again .

<article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>

    <article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>

    <article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>

 
$('.j_open').on('click', function(e) {
e.preventDefault();
$('.j_open_div').slideToggle('slow');
});


   

Answer 1

Just find the element .j_open_div within the article of the link that was clicked using .closest() and .find():

$('.j_open').on('click', function(e) {
   e.preventDefault();
   $(this)                // link clicado
   .closest('article')    // busca o ancestral "article"
   .find('.j_open_div')   // busca dentro do ancestral o elemento com a classe ".j_open_div"
   .slideToggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>

    <article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>

    <article class="product_category box box100" id="1">
    <span><a href='' class='j_open'> abir</a></span>
      <div class="j_open_div" style="display: none;">
        conteudo
      </div>
    </article>