ToggleShow elements only in this certain div clicked to show

Question

I have dynamic content with certain divs hidden on load. On button click the certain elements in this certain div should appear visible.

I've tried the following at the moment:

$(document).ready(function(){
    $(".hide").hide();
    $('.toggle').click(function(){
        $(this).next().slideToggle();
    });
});

But the logic behind this would be something like this:

$(document).ready(function(){
    $(".hide").hide();
    $('.toggle').click(function(){
        $(this).next('.hide').slideToggle();
    });
});

Here's the JSFiddle: https://jsfiddle.net/jvt7r5qv/1/

How could this be improved?

Answer 1

$.next() finds the next element in the DOM that matches the (optional) selector inside. So $.next('.hide') doesn't match anything since the next element after .toggle isn't .hide - .hide is nested inside the next element. So to find .hide , target the next element after .toggle , then use $.find() to target the nested .hide element.

 $(document).ready(function(){ $(".hide").hide(); $('.toggle').click(function(){ $(this).next().find('.hide').slideToggle(); }); }); 

 .flexing { display:flex; } .flex { flex:1; } body { padding:80px; } .publications p, .publications h3 { color:#393939; } .publication { border-top:1px solid #393939; padding:50px 0 100px 0; position:relative; } .publication:last-of-type { border-bottom:1px solid #393939; margin-bottom:100px; } .pub-col2 { position:relative; } .ion-ios-close-empty { font-size: 4em; position: absolute; right: 6px; top: 0; } .hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="publications"> <div class="publication flexing"> <span class="ion-ios-close-empty toggle">X</span> <div class="pub-col flex"> <h3>SDB is prevalent in US Latinos but rarely associated with a clinical diagnosis</h3> <div class="hide"> <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,</p> <p>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals</p> <p>of diverse backgrounds: the hispanic community health study/study <br> of latinos. American Journal of Respiratory and Critical Care <br> Medicine, 189 (3), 335–344.</p> </div> </div> <div class="pub-col2 flex"> <div class="hide"> <h3>Summary</h3> <p>The correlations between the ARES and PSG for simultaneously <br> acquired recordings was 0.96 using an apnea/hypopnea index <br> with a 4% desaturation (AHI-4%), and 0.93 using a respiratory <br> disturbance index based on Chicago criteria (RDI). The diagnostic <br> sensitivity of in-lab ARES RDI was 0.95 and the specificity was <br> 0.94; comparable measures to PSG for the in-home ARES RDI <br> values were 0.85 and 0.91.</p> <p><a href="http://#">PDF Link</a></p> </div> </div> </div> <div class="publication flexing"> <span class="ion-ios-close-empty toggle">X</span> <div class="pub-col flex"> <h3>Sleep-disordered breathing in hispanic/latino individuals of diverse backgrounds</h3> <div class="hide"> <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A, <br> et al… (2014). Sleep-disordered breathing in hispanic/latino individuals <br> of diverse backgrounds: the hispanic community health study/study <br> of latinos. American Journal of Respiratory and Critical Care <br> Medicine, 189 (3), 335–344.</p> </div> </div> <div class="pub-col2 flex"> <div class="hide"> <h3>Summary</h3> <p>The correlations between the ARES and PSG for simultaneously <br> acquired recordings was 0.96 using an apnea/hypopnea index <br> with a 4% desaturation (AHI-4%), and 0.93 using a respiratory <br> disturbance index based on Chicago criteria (RDI). The diagnostic <br> sensitivity of in-lab ARES RDI was 0.95 and the specificity was <br> 0.94; comparable measures to PSG for the in-home ARES RDI <br> values were 0.85 and 0.91.</p> <p><a href="#" target="_blank">PDF link</a></p> </div> </div> </div> </div> 

Answer 2

The problem is that the .toggle elements aren't siblings with the .hide elements. As the documentation states, the .next() method will select the immediately following sibling element.

If you want to select the next adjacent .pub-col element that contains a .hide element, then you could use the .nextAll() method (which would select any following sibling that matches the selector), then chain the .first() method since .nextAll() returns a collection. From there, you can find the .hide() descendant element with the .find() method and then remove the .hide class and show the element.

 $(".hide").hide(); $('.toggle').click(function() { $(this).nextAll(':has(.hide)') .first() .find('.hide') .removeClass('hide') .slideToggle(); }); 

 .flexing { display: flex; } .flex { flex: 1; } body { padding: 80px; } .publications p, .publications h3 { color: #393939; } .publication { border-top: 1px solid #393939; padding: 50px 0 100px 0; position: relative; } .publication:last-of-type { border-bottom: 1px solid #393939; margin-bottom: 100px; } .pub-col2 { position: relative; } .ion-ios-close-empty { font-size: 4em; position: absolute; right: 6px; top: 0; } .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="publications"> <div class="publication flexing"> <span class="ion-ios-close-empty toggle">X</span> <div class="pub-col flex"> <h3>SDB is prevalent in US Latinos but rarely associated with a clinical diagnosis</h3> <div class="hide"> <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A,</p> <p>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals</p> <p>of diverse backgrounds: the hispanic community health study/study <br>of latinos. American Journal of Respiratory and Critical Care <br>Medicine, 189 (3), 335–344.</p> </div> </div> <div class="pub-col2 flex"> <div class="hide"> <h3>Summary</h3> <p>The correlations between the ARES and PSG for simultaneously <br>acquired recordings was 0.96 using an apnea/hypopnea index <br>with a 4% desaturation (AHI-4%), and 0.93 using a respiratory <br>disturbance index based on Chicago criteria (RDI). The diagnostic <br>sensitivity of in-lab ARES RDI was 0.95 and the specificity was <br>0.94; comparable measures to PSG for the in-home ARES RDI <br>values were 0.85 and 0.91.</p> <p><a href="http://#">PDF Link</a> </p> </div> </div> </div> <div class="publication flexing"> <span class="ion-ios-close-empty toggle">X</span> <div class="pub-col flex"> <h3>Sleep-disordered breathing in hispanic/latino individuals of diverse backgrounds</h3> <div class="hide"> <p>Redline S, Sotres-Alvarez D, Loredo J, Hall M, Patel S, Ramos A, <br>et al… (2014). Sleep-disordered breathing in hispanic/latino individuals <br>of diverse backgrounds: the hispanic community health study/study <br>of latinos. American Journal of Respiratory and Critical Care <br>Medicine, 189 (3), 335–344.</p> </div> </div> <div class="pub-col2 flex"> <div class="hide"> <h3>Summary</h3> <p>The correlations between the ARES and PSG for simultaneously <br>acquired recordings was 0.96 using an apnea/hypopnea index <br>with a 4% desaturation (AHI-4%), and 0.93 using a respiratory <br>disturbance index based on Chicago criteria (RDI). The diagnostic <br>sensitivity of in-lab ARES RDI was 0.95 and the specificity was <br>0.94; comparable measures to PSG for the in-home ARES RDI <br>values were 0.85 and 0.91.</p> <p><a href="#" target="_blank">PDF link</a> </p> </div> </div> </div> </div> 

In doing so, your click function will work when clicking on it multiple times.

Updated Example

$(".hide").hide();
$('.toggle').click(function() {
  $(this).nextAll(':has(.hide)')
         .first()
         .find('.hide')
         .removeClass('hide')
         .slideToggle();
});

Answer 3

先生，您正在寻找类似.closest（）的切换类的东西，这是我最喜欢的答案http://jsfiddle.net/6whzQ/

el.closest('class').toggleClass('class')