jQueryヘッダーで展開/折りたたみ

Question

私はアコーディオンプラグインを使用しようとしましたが、動作しません。純粋なjQueryを使用した簡単なソリューションがあります。本質的には

あなたはclass="expand"と<h2>をクリックしたとき、それはclass="collapse"で次のdiv「を展開する」必要があるように、私はそれをしたいと思います。すべてのdivはデフォルトで折りたたまれている必要があります。

ご協力いただきまして、ありがとうございます。

テスト目的の場合はjsFiddleデモをご覧ください。

Answer 1

これは単純ですが、ちょうど下に使用

$('.expand').click(function() { 
    $(this).next('.collapse').slideToggle(); // or use .toggle() for no animation 
}); 

フィドル：http://jsfiddle.net/garreh/WQYc7/2/

---

はデフォルトでは折りたたまれるためには、単にCSSの下に追加します。

.collapse { 
    display: none; 
} 

Answer 2

jsFiddle demo

$('h2.expand').click(function(){ 
var co = $('.collapse') 
var el = $(this).next(co); 
var doit = el.is(':hidden') ? (co.slideUp(), el.slideDown()) : co.slideUp() ; 
}); 

それは、閉じたものを崩壊する前に、開いているすべての要素を隠します。
要素が開かれている場合、開いた状態をトグルします。

Answer 3

jQueryを使用して、あなたのフィドルを更新しました。

HTML：

<div id="accordion"> 
<h2 class="toggle">Click to expand and collapse</h2> 

<div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor. 
</div> 

<h2 class="toggle">Click to expand and collapse 2</h2> 
<div class="pane"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor. 
</div> 
</div> 

Javascriptを：

<script> 
$(document).ready(function() { 
    $('#accordion h2').click(function() { 
    var $nextDiv = $(this).next(); 
    var $visibleSiblings = $nextDiv.siblings('div:visible'); 

    $(this).toggleClass('current').siblings('h2').removeClass('current'); 
    if ($visibleSiblings.length) { 
     $visibleSiblings.slideUp('fast', function() { 
     $nextDiv.slideToggle('fast'); 
     }); 
    } else { 
     $nextDiv.slideToggle('fast'); 
    } 
    }); 
});​ 
</script> 

CSS：

.toggle { 
    background: gray; 
    padding: 5px; 
    cursor: pointer; 
} 
.pane { display: none; } 
​.current { background: green } 

Answer 4

ちょうどそれを行うプラグインを書きました。

が。（ 'クリック '機能（）{$（この）.nextに（）」。崩壊 '（'。拡張'）http://redhotsly.github.com/simple-expand/