今更ながらですが、クライアントワークでの登場頻度がまだまだ高いアコーディオンメニューの実装を備忘録としてメモしておきます。jQueryを使うことで非常にシンプルに作成することができます。モバイルサイトでも使い勝手が良くまだまた需要は高いですよね。   基本的となるパーツですが、HTMLはdl要素で作成し、見出しとなるクリック部分のバーはdtで、コンテンツが入り開閉する部分のパネルはddで作成していきます。CSSは適宜デザインに合わせて調整しますが、dd要素は初期表示では非表示にしておきます。

// HTML
<dl class="accordion-menu" id="accordion">
   <dt>パネル1
   </dt>
   <dd>パネル1のコンテンツ　パネル1のコンテンツ
   </dd>
   <dt>パネル2
   </dt>
   <dd>パネル2のコンテンツ　パネル2のコンテンツ
   </dd>
   <dt>パネル3
   </dt>
   <dd>パネル3のコンテンツ　パネル3のコンテンツ
   </dd>
</dl>

// CSS
.accordion-menu {
   margin: 0 0 60px 0;
   border: 2px solid #748992;
}
.accordion-menu dt {
   border-top: 2px solid #748992;
   background: #1e769c;
   padding: 10px;
   color: #fff;
}
.accordion-menu dt:first-child {
   border-top: none;
}
.accordion-menu dd {
  display: none;
  background: #e0eff5;
  padding: 10px;
  color: #222;
}

 

1. バーをクリックするとパネルが開くタイプ

基本的な形になります。バーのクリックで対応するパネルが開閉します。複数のパネルを開くことができます。クリックしたdt要素の次にあるdd要素がクリックごとに開閉します。

$(function(){
   $('#accordion > dt').on('click',function(){
     $(this).next('dd').slideToggle();
   });
});

 

2. バーをクリックするとパネルが開き、それ以外の開いているパネルが閉じるタイプ

バーをクリックすると開閉するのですが、他に開いているパネルがあるとそのパネルが閉じるタイプになります。なので複数のパネルが表示されることはなく、単一のパネルが表示されます。dd要素が開いているかを判断し、開いている場合は閉じて、閉じている場合は開き、さらに兄弟要素にあたるその他のdd要素を閉じます。

$(function(){
   $('#accordion > dt').on('click',function(){
     if($(this).next('dd').is(':visible')) {
       $(this).next('dd').slideUp(300);
     } else {
       $(this).next('dd').slideDown(300).siblings('dd').slideUp(300); 
     }
   });
});

  アコーディオンメニューもシンプルな形であればjQueryを使って比較的簡単に実装ができます。パネルの内容が多かったり、スペースに制限があるようでしたら後者の方を使うなど対応の幅を広げることができるかと思います。 今回のサンプルはこちらからご確認いただけます。