CODEWITHSUNDEEP
jqueryslidetoggle
Sergi
Sergi

Reputation: 1240

JQuery slideToggle only 1 item at a time

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

Upvotes: 1

Views: 58

Answers (3)

Ajay
Ajay

Reputation: 196

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

Upvotes: 1

Bharatsing Parmar
Bharatsing Parmar

Reputation: 2455

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

Upvotes: 1

Purvik Dhorajiya
Purvik Dhorajiya

Reputation: 4870

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?

Upvotes: 1

Related Questions