Ownedmedia ウェブ制作に役立つコンテンツを発信中!

jQuery 2017.09.27

シンプルなアコーディオンメニューをjQueryで実装する

Tags: ,,
最終更新日:Update

今更ながらですが、クライアントワークでの登場頻度がまだまだ高いアコーディオンメニューの実装を備忘録としてメモしておきます。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を使って比較的簡単に実装ができます。パネルの内容が多かったり、スペースに制限があるようでしたら後者の方を使うなど対応の幅を広げることができるかと思います。

今回のサンプルはこちらからご確認いただけます。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?