How to navigate a click with just the click of a clicked element

Question

I have 2 divs with 2 divs inside inside this type

<div id="div1" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> <div id="div2" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> 

And my javascript

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

An example is at https://jsfiddle.net/msjaasfk/2/

So, I want to click one .flip to show only .panel in the same div as not all .panel with class .panel .

Answer 1

You select and toggle all .panel elements. Modify the code so that only the .panel element corresponding to the clicked element switches:

Updated example

 $(".flip").click(function() { $(this).next().slideToggle("slow"); }); 

• this is a reference to the .flip element that clicked
• The .next() method will select the next kinship element (in this case .panel ).

As an additional note, you can also change your code so that only one panel opens at a time:

Updated example

 $(".flip").click(function() { $('.panel').not($(this).next()).slideUp(); $(this).next().slideToggle("slow"); }); 

 .panel, .flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } .panel { padding: 50px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> <div id="div2" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> 

Answer 2

In your context, .panel will select all elements of the panel class. In the click event for the .flip element .flip you can use jQuery . Next () to select only the next .panel . You might want to specify a .panel selector if your HTML structure inside the div changes

 $(this).next(".panel").slideToggle("slow"); 

Here is a complete example.

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

 .panel, .flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } .panel { padding: 50px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div> <div id="div2" class="div"> <div class="flip">Click to slide down panel</div> <div class="panel">Hello world!</div> </div>