0%

Programmingプログラミングナレッジ

Posted:2017.09.27

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

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】