アコーディオン

/* HTML <ul class="accordion"> <li> <p>XXXXXXXX</p> <div class="content"> <p>XXXXXXXXXXXXXXXXXX</p> </div> </li> <li> <p>XXXXXXXX</p> <div class="content"> <p>XXXXXXXXXXXXXXXXXX</p> </div> </li> <li> <p>XXXXXXXX</p> <div class="content"> <p>XXXXXXXXXXXXXXXXXX</p> </div> </li> </ul> */ /* CSS // アコーディオン：デフォルト（閉） .accordion > li { cursor: pointer; } .accordion > li .content { display: none; } // アコーディオン：クリック時（開） .accordion > li.expanded { background-color: #ededed; } .accordion > li.expanded > p { font-weight: bold; } */ $(function(){ $('.accordion') .on('click', 'li', function() { var $this = $(this); // コンテンツを開く $this .toggleClass('expanded') // toggleClass：()内で指定したクラスが対象要素に無ければ追加・有れば削除 → addClass()とremoveClass()を合わせたようなメソッド .children('.content') // children：直接の子要素のみを取得 /* .toggle(速度)、.slideToggle(速度)共に、CSSのdisplayプロパティを切り替えるメソッド 対象要素のdisplayプロパティがnoneならblockまたはinlineに。inlineまたはblockならnoneに切り替える。 */ .slideToggle('fast') // .slideToggle(速度)は上下開閉のアニメーション */ // ↓↓↓ 他のアコーディオンを開くと、すでに開いている他のアコーディオンが閉じる仕組み ↓↓↓ .end() // 直前のトラバースをキャンセルして、ひとつ前の状態に戻す $this.parent().siblings() → $this.parent() .siblings() // 兄弟要素を全て返す → liを取得 .removeClass('expanded') // 要素からクラス（.expanded）を削除 .children('.content') .slideUp('fast'); // 要素のheightプロパティが０になるまで徐々に減らし、最終的にはdisplayをnoneにする }); });