0
jQuery UIプラグインにシンプルなアコーディオンが組み込まれています。プラグインは必要に応じて動作しますが、クリック可能な要素(コンテンツを開く/閉じる)にクラスを追加して別のスタイルにすることができます。ここでjQuery UIアコーディオンのアクティブクラス
は、原油が、機能の機能CodePenバージョンです:
http://codepen.io/moy/pen/dXObjX
これは私のマークアップの構造である:
<div class="mount accordion">
<div class="hgroup accordion__toggle">
<h3 class="hgroup__title">Course 1</h3>
</div>
<div class="accordion__content">
<!-- Hidden content in here -->
</div>
</div>
そして、私のjavascript:
$(document).ready(function($) {
$('.accordion').find('.accordion__toggle').click(function(){
// Expand or collapse this panel
$(this).next('.accordion__content').slideToggle(200);
});
});
現在、すべてのパネルがデフォルトで開かれています.hidden
のクラスが.accordion__content
に追加されます。
ありがとう、誰かがこれを手伝ってくれることを祈っています!
おかげで、それは本当に近いです!私は、 '.accordion__content'が隠されているかどうかをチェックするだけで、どのクラスをいつ適用するかを知る必要があると思います。このCodePenのように:http://codepen.io/moy/pen/dXObjX ...見出しをクリックすると(自分のコンテンツは閉じられています)クラスによって適用された赤色は反対の状態で表示されますか? – user1406440