使用jQuery創建提供的內容的手風琴

Question

我不太瞭解JS/jQuery。我需要採用這個HTML並使用JS來轉換/重新構造它，以便它起到手風琴的作用。

HTML：

<h6>heading 1</h6> 
<p>this is some content</p> 
<p>this is some more content</p> 

<h6>heading 2</h6> 
<p>this is some content</p> 
<p>this is some more content</p> 

<h6>heading 3</h6> 
<p>this is some content</p> 
<p>this is some more content</p> 

我需要採取H6作爲內容區域之間的手風琴鏈接和內容。我設法從教程中獲得這一點，但它做爲標籤，不知道如何重做，所以它的行爲/結構作爲手風琴：

我想將需要像（當點擊標題更改爲正確當然，內容）：

<div class="accordion"> 
    <div class="title">title 1</div> 
    <div class="content">content 1</div> 

    <div class="title">title 2</div> 
    <div class="content">content 2</div> 
</div> 

JS，我需要調整：

var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i){  
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>'); 
    }); 

    for(var i = 0; i < headers.length; i++) { 
    $('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>'); 
    } 

    $('ul.tabs').each(function(){ 
    var active, content, links = $(this).find('a'); 
    var listitem = $(this).find('li'); 
    active = listitem.first().addClass('active'); 
    content = $(active.attr('href')); 
     $('.tab').hide(); 
    $(this).find('a').click(function(e){ 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
    }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 

Answer 1

這裏是一個非常簡單的實現基於您的結構手風琴。對它的Codepen：http://codepen.io/anon/pen/EKZgMy

此實現是使用jQuery nextUntil函數來實現所需的結果。

HTML

<div class="accordion"> 

    <h6>heading 1</h6> 
    <p>this is some content</p> 
    <p>this is some more content</p> 

    <h6>heading 2</h6> 
    <p>this is some content</p> 
    <p>this is some more content</p> 

    <h6>heading 3</h6> 
    <p>this is some content</p> 
    <p>this is some more content</p> 

</div> 

CSS

.accordion h6 { 
    display: block; 
    cursor: pointer; 
} 

.accordion p { 
    display: none; 
    margin: 0; 
    padding: 0 0 1em; 
} 

.accordion * { 
    display: none 
} 

jQuery的

$('.accordion h6').click(function() { 
    $(this).nextUntil('h6').toggle(); 
}); 

如果你想要的動畫，你可以使用jQuery來代替切換的款項類。

更新 - 額外的手風琴功能

這裏是一個更新，迫使只有一個手風琴在同一時間打開： 更新Codepen：http://codepen.io/anon/pen/pyREYM

jQuery的

var accordionContent = $('.accordion p'); 

$('.accordion h6').click(function() { 

    // Check if current accordion item is open 
    var isOpen = $(this).next().is(":visible"); 

    // Hide all accordion items 
    accordionContent.hide(); 

    // Open accordion item if previously closed 
    if (!isOpen) { 
    $(this).nextUntil('h6').show(); 
    } 
});