如何僅切換*下一步*並隱藏其他類

Question

我在可摺疊的jquery中遇到了一些問題。

我的HTML元素都是這樣

<div id="first" class="collapse-container"> 

     <h1 class="collapse"> 
     <span class="arrow-r"></span>First Heading</h1> 
     <div class="accordion-active"> 
      <p>First Section</p> 
      <p>First Section</p><p>First Section</p> 
     </div> 
     <h1 class="collapse"><span class="arrow-r"></span>Second Heading</h1> 
     <div class="accordion-active"> 
      <p>Second Section</p> 
      <p>Second Section</p> 
     </div> 
     <h1 class="collapse"><span class="arrow-r"></span>Third Heading</h1> 
     <div class="accordion-active"> 
      <p>Third Section</p> 
      <p>Second Section</p> 
     </div> 
    </div> 

我使用這個jQuery的切換類

$(document).ready(function() { 
     $(".collapse").click(function() { 
      $(this).toggleClass("active"); 
     }); 
    }); 

    jQuery(document).ready(function() { 
     jQuery(".accordion-active").hide(); 
     //toggle the componenet with class msg_body 
     jQuery(".collapse").click(function() 
     { 
     jQuery(this).next(".accordion-active").slideToggle(0); 

     }); 
    }); 

現在我的問題，當我點擊了第一個h1標籤只顯示其elements.thats精細。 但現在當我點擊第2個h1標籤時，它顯示了它的元素，但是第一個H1標籤仍然打開。

如何設置所有其他人隱藏，而其中一個（下一個課程）處於活動狀態？

謝謝

Answer 1

試試這個。

$(".accordion-active").hide(); 

//toggle the componenet with class msg_body 
$(".collapse").click(function(){ 

    var $this = $(this); // Cacheing $(this) 

    $('.accordion-active').slideUp(); 

    if(!$this.next(".accordion-active").is('.open')){ 
    //$('h1').removeClass('active'); 
    $('.accordion-active').removeClass('open'); 
    $this.addClass("active").siblings("h1").removeClass("active"); 
    $this.next(".accordion-active").addClass('open').slideDown(); 
    } else { 
    $("h1").removeClass("active"); 
    $this.next(".accordion-active").removeClass('open').slideUp(); 
    } 

}); 

Fiddle Demo

Answer 2

或者你可以只使用Accordion - jQuery UI。