【コピペでOK！】簡単に実装できるアコーディオンメニュー

webデザイン , アコーディオンメニュー , コード ,

2020/09/22

コンテンツが豊富なwebサイトでは表示したい内容も比例して多くなると思います。しかし、すべての情報をはじめから表示してしまうと情報量が多すぎてユーザーの使いやすさを損なってしまいます。

そこで多くのwebサイトでは表示する情報を整理するために様々な工夫が施されています。

今回はその一つであるアコーディオンメニューの実装方法を紹介したいと思います。

表示する項目が多くデザインをスッキリさせたい時や、ユーザーが必要とした時のみ表示させる、など使用することは多いのでスムーズに実装できるようにしておくと作業が捗ります。

デモ

アコーディオンの項目をクリックするとメニューが表示されます。

コード紹介

まずはコードの紹介です。
前提としてjQueryを使用しているので読み込み、または設置が必要となります。

html

<div class="accordion">
<div class="accordion js-accordion">
    <div class="accordion__label js-accordionLabel">accordion01</div>
    <div class="accordion__wrap js-accordionWrap">
        <ul>
            <li><a href="">link01</a></li>
            <li><a href="">link02</a></li>
            <li><a href="">link03</a></li>
        </ul>
    </div>
</div>
<div class="accordion js-accordion">
    <div class="accordion__label js-accordionLabel">accordion02</div>
    <div class="accordion__wrap js-accordionWrap">
        <ul>
            <li><a href="">link01</a></li>
            <li><a href="">link02</a></li>
            <li><a href="">link03</a></li>
        </ul>
    </div>
</div>
<div class="accordion js-accordion">
    <div class="accordion__label js-accordionLabel">accordion03</div>
    <div class="accordion__wrap js-accordionWrap">
        <ul>
            <li><a href="">link01</a></li>
            <li><a href="">link02</a></li>
            <li><a href="">link03</a></li>
        </ul>
    </div>
</div>

<div class="accordion__label js-accordionLabel">accordion01</div>

<ul>

</ul>

</div>

<div class="accordion__label js-accordionLabel">accordion02</div>

<ul>

</ul>

</div>

<div class="accordion__label js-accordionLabel">accordion03</div>

<ul>

</ul>

</div>

デザイン用のクラスとjs-から始まるjs用のクラスを指定しています。
デザイン用のクラスは動作に影響しないので任意で変更していただいて構いません。

css

.accordion__label {
  width: auto;
  padding: 20px;
  border-bottom: solid 1px #bbb;
  background-color: #ccc;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.accordion__wrap {
  display: none;
  width: auto;
}

.accordion__wrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.accordion__wrap ul li {
  list-style: none;
  border-bottom: solid 1px #ccc;
}

.accordion__wrap ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  background-color: #eee;
}

.accordion__label {

width: auto;

padding: 20px;

border-bottom: solid 1px #bbb;

background-color: #ccc;

cursor: pointer;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.accordion__wrap {

display: none;

width: auto;

}

.accordion__wrap ul {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

.accordion__wrap ul li {

list-style: none;

border-bottom: solid 1px #ccc;

}

.accordion__wrap ul li a {

display: block;

padding: 20px;

text-decoration: none;

background-color: #eee;

}

デザインは変更されるのを前提にしているので余計な装飾はなるべく付与していません。

重要なのはアコーディオンメニューの中身となる部分、このコードを例にするとクラス「accordion__wrap」はdisplay:none;で非表示にしておいてください。

js

$(function(){
    $('.js-accordionLabel').on('click',function(){
        var contents = $(this).parents('.js-accordion').find('.js-accordionWrap');
        contents.slideToggle(300);
    });
});

$(function(){

$('.js-accordionLabel').on('click',function(){

var contents = $(this).parents('.js-accordion').find('.js-accordionWrap');

contents.slideToggle(300);

});

項目の部分がクリックすると動作します。
クリックされた項目のメニューがアコーディオンで表示されます。

解説

アコーディオンメニューを実装するための仕組みは、非表示にしておいたメニューの中身をjQueryのslideToggleで表示・非表示を切り替えています。

切り替えのアニメーションにかかる時間は第一引数に指定します。
このコードであれば300と指定しているのでアニメーションにかかる時間は0.3秒です。必要に応じてアニメーションの速度を変更することが可能です。

第二引数にはアニメーション後に実行した関数を指定できますが、アコーディオンメニューを実装するだけならば特に必要はないので割愛します。

アコーディオンメニューの項目数が増減につれてクラス「js-accordionLabel」の数も増減しますが$(this)でクリックされた要素のみを取得できるのでjsの調整は必要ありません。

クラス「js-accordion」内であれば新しく要素を追加しても動くのでデザイン用のタグなどを追加することも可能です。

まとめ

js-から始まるクラスの親子関係さえ変更しなければ大体動きます。
挙動はjsに任せてデザインを変更するだけなので簡単に実装できるかと思います。
用途にあわせて参考にしていただけたら幸いです。