本当にさくっと作りたい時のメモ用
本当に最低限の動きだけ。
HTML
<divclass="js-accordion-toggle">開く</div><divclass="js-accordion-item"style="display:none;"> ここにコンテンツが入る
</div>ボタンとなる要素に.js-accordion-toggle、開閉したい要素に.js-accordion-itemを設定。display:none;を直書きしているのはHTMLが一番早く読み込まれるため、CSSやJSに設定を追加するよりも遅延が少なく、コンテンツが一瞬表示されてしまうのを防ぐため。
ページが開いた状態を初期状態にしたい場合はstyle="display:none;"を書かずに.js-accordion-toggleにis-openクラスを追加しときましょう。
jQuery
var$toggle=$('.js-accordion-toggle');var$item=$('.js-accordion-item');varopenClass='is-open';varoperationText=[open:'開く',close:'閉じる'];$toggle.on('click',function(){if($(this).hasClass(openClass)){$(this).removeClass(openClass);$(this).next($item).slideUp();$(this).text(operationText[open]);}else{$(this).addClass(openClass);$(this).next($item).slideDown();$(this).text(operationText[close]);}});クリックした$toggleがis-openクラスを持っているかどうかを判別し、
- ついていなければ
is-openを付与し、直下にある$itemを表示させる。 - ついていれば
is-openを削除し、直下にある$itemを非表示にする。
operationTextはボタンの文言を変更するための文字列のまとまり。
is-openがついていればoperationText[open]に格納されている文字列を表示- ついていなければ
operationText[close]に格納されている文字列を表示させる。
以上です。
さっくりアコーディオンさせたい場合のメモでした。