Открытие/закрытие divs

Question

У меня есть раздел на моем сайте, в котором есть несколько заголовков, каждый из которых содержит контент, связанный с ним, в разделе, которое падает при нажатии на заголовок. Я попытался добавить к нему некоторый javascript, так что, когда вы нажимаете заголовок, содержимое появляется, и весь другой открытый контент исчезает. Он работает для первых нескольких тестов open-close, но через некоторое время они остаются открытыми. Мне интересно, есть ли способ сделать так, чтобы вы могли только открыть один из этих разделов.

Заранее благодарен!

Вот HTML:

<div class="heading">Header 1</div> 
<div class="headingcontent">Content 1</div> 
<div class="heading">Header 2</div> 
<div class="headingcontent">Content 2</div> 
<div class="heading">Header 3</div> 
<div class="headingcontent">Content 3</div> 

Вот JavaScript:

jQuery(document).ready(function() { 
jQuery(".headingcontent").hide(); 
var headingcontent_open = false; 

jQuery(".heading").click(function() { 

    if (headingcontent_open === false) { 
     headingcontent_open = true; 
     jQuery(this).next(".headingcontent").slideToggle(500); 

    } else { 
     headingcontent_open = false; 
     $(".headingcontent").hide(500); 
     jQuery(this).next(".headingcontent").slideToggle(500); 

    } 

}); 

Answer 1

дают содержание каждого Див идентификатор и установить данных- * атрибут в тег заголовка и ссылаться на него в JQuery кода при использовании «активного» класса.

<div class="heading" data-content="content1">Header 1</div> 
<div class="headingcontent" id="content1">Content 1</div> 
<div class="heading" data-content="content2">Header 2</div> 
<div class="headingcontent" id="content2">Content 2</div> 
<div class="heading" data-content="content3">Header 3</div> 
<div class="headingcontent" id="content3">Content 3</div> 

JavaScript:

jQuery(".heading").click(function() { 
    var ContentDivID = $(this).data("content"); 

    $(".headingcontent").removeClass("active"); 
    $("#"+ContentDivID).addClass("active").slideDown(500); //Slides down the active div 
    $(".headingcontent").not(".active").slideUp(500); //Slides up all the content divs that dont have the "active" class 
}); 

Это предполагает, что вы используете HTML5, как данных- * являются html5 атрибуты, если вы ориентируетесь браузеры, которые не имеют те, которые доступны вам придется изменить код, чтобы удовлетворить что ситуация.