JQuery slideToggle only 1 item at a time

Question

I want to keep my code as simple as possible for this section. Given an accordion menu like this:

     <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);
})

How can I do it so only 1 "accordion-text" is visible at a time?

This sort of works, I suppose it's close but it has a strange behavior, it sometimes works sometimes it doesn't:

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

Bharatsing Parmar · Accepted Answer · 2017-01-20T11:03:18.740

1

You can try this updated 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();  
})

edited Jan 20 '17 at 11:03

answered Jan 20 '17 at 10:51

Bharatsing Parmar

2,435
1
9
18

".not($(this)" is what I needed, thank you. Excuse me but, is $(".accordion-wrap .accordion-text").hide(); preferable over display: none in css? – Sergi Jan 20 '17 at 10:55
yes this for initially load div with hide and when click on title it toggle. but if you manage it using css then you can remove that line. – Bharatsing Parmar Jan 20 '17 at 10:58

score 1 · Answer 2 · answered Jan 20 '17 at 10:58

Below is the best example of slideUp and 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>

Would you please check my above snippet?

@Sergi [when-should-i-use-return-false-in-jquery-function](http://stackoverflow.com/questions/5927689/when-should-i-use-return-false-in-jquery-function). — Purvik Dhorajiya, Jan 20 '17 at 11:46

score 1 · Answer 3 · answered Jan 20 '17 at 11:05

use this css

.accordion-text{
  display:none;
}

and this js

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

JQuery slideToggle only 1 item at a time

3 Answers3