close tab using JQUERY

Question

close tab using JQUERY

Navigation

#1 by (2 votes)

1

I'm trying to click on the link abir open the tab but when I click open all would have some way to 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');
});

php jquery html5

asked by anonymous 21.09.2018 / 03:33

1 answer

Pandas SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame Get value from a field in the view in a controller [closed]

score 2 · Accepted Answer

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><articleclass="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>