How to activate only the next div?

Asked

Viewed 74 times

1

On my page I have several elements that I prefer to hide so as not to make the site too big, but when clicking to show one, it expands all of the page. How do I make him select only the next element?

$(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").slideToggle("slow");
        });
    });

So ta Jquery and the code is like this:

    <div class="flip"><b><u>Expandir/Esconder</u></b></div>
    <div class="panel">
html jquery

3 answers

3


Guy use the method .next() jQuery along with select this, the this will only take the element you clicked, and the next() will select the next element with the class you set 

$(document).ready(function() {
  $(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">
  111
</div>
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">
  222
</div>

Here is the official documentation of .next() https://api.jquery.com/next/

2

Use $(this).next('.panel') in place of $(".panel"). This will cause the next one to be accessed panel relative to the element clicked, instead of selecting all

  • Boy those little peguntas dots gave a UP huh!

  • Are you talking about reputation? I also thought it was strange, I remember being 6k, a beautiful day and has 2k more. He must have bugged SE, I was even looking at my reputation tab yesterday to see where this came from

  • The answers until last week were worth 5pts, now went to 10pts, there was retroactive, gave +5 to the old questions :D, I took 3.5k in this rss

  • @hugocsl I’m totally outdated shusauhusahuhsa

0

Another way is by taking the class index .flip clicked and apply to the same class index .panel.

The advantage of this way over the .next() is that the element .panel does not need to be brother to the element .flip. The .next() only works with sibling elements that are after the selected element.

For example, if you have the structure below, the .next() it won’t work anymore:

<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div>
   <div class="panel">painel 1</div>
</div>

Note above that the div.panel is not the sister of div.flip.

Getting the index, as I said, works in any case, because each index of the class .flip is "married" with each class index .panel.

Just do this:

$(document).ready(function(){
   $(".flip").click(function(){
      var idx = $(".flip").index(this); // pega o índice
      $(".panel").eq(idx).slideToggle("slow");
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">painel 1</div>

<div class="flip"><b><u>Expandir/Esconder</u></b></div>
<div class="panel">painel 2</div>

The .index() me returns the index of .flip clicked and use .eq() to take the same class index .panel. Very simple!

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.