JQuery slideToggle nur 1 Element auf einmal

Question

Ich möchte meinen Code für diesen Abschnitt so einfach wie möglich halten. Gegeben ein Akkordeon-Menü wie folgt aus:

 <div class="wrap"> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    </div> 

JQ:

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
}) 

Wie kann ich es tun, so dass nur ein "Akkordeon-Text" ist zu einem Zeitpunkt sichtbar?

diese Art von Arbeiten, nehme ich es in der Nähe ist, aber es hat ein seltsames Verhalten, ist es manchmal manchmal funktioniert es nicht:

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
    $(this).siblings().children().eq(1).hide(); 
}) 

Answer 1

Sie können versuchen, diese aktualisierte Code jsfiddle.net/bharatsing/ectb5Lqa/1/

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).hide(); 
}) 

Answer 2

Unten ist das beste Beispiel für slideUp und slideToggle Animation.

$(".accordion-wrap").on("click", function(){ 
 
    $(this).children('.accordion-text').slideToggle(); 
 
     
 
    $(this).siblings().children().next().slideUp(); 
 
    return false; 
 
})

.accordion-text{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    </div>

bitten Sie meine oben Schnipsel überprüfen?

Answer 3

Verwendung dieses css

.accordion-text{ 
    display:none; 
} 

und diese js

$(document).ready(function(){ 
    $(".accordion-item").click(function(){ 
    $(".accordion-text").slideUp(400); 
    if(!$(this).next().is(":visible")){ 
     $(this).next().slideToggle(400) 
     }  
    }) 
})