У меня есть проблема с разворачивающимся 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 для класса toggle
$(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, он показывает только свои элементы. Это прекрасно. Но теперь, когда я нажимаю на тег 2 h1, он показывает свои элементы, НО FIRST H1 TAG STILL OPEN.
Как я могу скрыть все остальные, в то время как один (следующий класс) активен?
благодаря
Попробуй это.
$(".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();
}
});
Или вы можете просто использовать интерфейс Accordion - jQuery.