jQueryプラグインを使わずにアコーディオンメニューを作ろう

主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。
表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。

スポンサーリンク

アコーディオンメニューの中でも、特に汎用性の高い2つを備忘録的にメモ。

アコーディオンメニュー(ul、liを使用)

ulとliを使用してのアコーディオン。
アコーディオンの開閉と同時に矢印の切り替えを実装。
複数の項目を同時に開くことが可能。同じ部分をクリックすることによって非表示になります。

jQuery

$('.accordion_ul ul').hide();
	$('.accordion_ul h1').click(function(e){
	$(this).toggleClass("active");
	$(this).next("ul").slideToggle();
});

[1行目].accordion_ul ulの中身を非表示に
[2行目].accordion_ul h1をクリックしてアクション開始
[3行目]thisに対して、.toggleClassでactiveの切り替え
[4行目]thisの次の要素に対して、.slideToggleを実行

3行目のactiveは矢印の上下の向きを切り替える用のクラスとして指定しています。
矢印は擬似要素(:before、:after)で作っています。

サンプルページを表示

html

<ul class="accordion_ul">
    <li>
        <section>
        <h1>アコーディオンメニュー.1</h1>
        <ul>
            <li><a href="">アコーディオンメニュー.1-1</a></li>
            <li><a href="">アコーディオンメニュー.1-2</a></li>
            <li><a href="">アコーディオンメニュー.1-3</a></li>
        </ul>
        </section>
    </li>
    <li>
        <section>
        <h1>アコーディオンメニュー.2</h1>
        <ul>
            <li><a href="">アコーディオンメニュー.2-1</a></li>
            <li><a href="">アコーディオンメニュー.2-2</a></li>
            <li><a href="">アコーディオンメニュー.2-3</a></li>
        </ul>
        </section>
    </li>
    <li>
        <section>
        <h1>アコーディオンメニュー.3</h1>
        <ul>
            <li><a href="">アコーディオンメニュー.3-1</a></li>
            <li><a href="">アコーディオンメニュー.3-2</a></li>
            <li><a href="">アコーディオンメニュー.3-3</a></li>
        </ul>
        </section>
    </li>
    <li>
        <section>
        <h1>アコーディオンメニュー.4</h1>
        <ul>
            <li><a href="">アコーディオンメニュー.4-1</a></li>
            <li><a href="">アコーディオンメニュー.4-2</a></li>
            <li><a href="">アコーディオンメニュー.4-3</a></li>
        </ul>
        </section>
    </li>
</ul>
css

section h1,
dt {
    background-color: #9CF;
    border-bottom: solid 1px #59ACFF;
    margin-bottom: 1px;
	padding: 10px;
	color: #FFF;
	cursor: pointer;
	position: relative;
}

section h1:before,
dt:before {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  background: #FFF;
}

section h1:after,
dt:after {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -13px;
  background: #9CF;
}

section h1.active:before,
dt.active:before {
  margin-top: -2px;
}

section h1.active:after,
dt.active:after {
  margin-top: 3px;
}

section li,
dd {
	background-color: #F2F2F2;
	border-bottom: solid 1px #D6D6D6;
	padding: 8px 0 8px 24px;
}

section li a {
	position: relative;
	display: block;
}

section li a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 17px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #9CF;
}

section li a:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #F2F2F2;
}

開閉スイッチ付きアコーディオンメニュー(dl、dt、ddを使用)

dlとdt、ddを使用してのアコーディオン。
アコーディオンの開閉と同時に矢印の切り替えを実装。
開かれるのは1つのみで、2つを開こうとすると、初めに表示されていた項目は非表示になります。

jQuery

$('.accordion_dl dd').hide();
$('.accordion_dl dt').click(function(){
	$(this).toggleClass("active");   
	$(this).siblings("dt").removeClass("active");
	$(this).next("dd").slideToggle();
	$(this).next("dd").siblings("dd").slideUp();
});

[1行目].accordion_dl ddの中身を非表示に
[2行目].accordion_dl dtをクリックしてアクション開始
[3行目]thisに対して、.toggleClassでactiveの切り替え
[4行目].siblingsを使用して、thisの兄弟要素のdtに対して.removeClassを実行
[5行目].nextを使用して、thisの次のdd要素に対して.slideToggleを実行
[6行目].nextを使用して、thisの次のdd要素の兄弟要素のdd対して.slideUpを実行

サンプルページを表示

html

<dl class="accordion_dl">
    <dt>アコーディオンメニュー.1</dt>
    <dd>アコーディオンメニュー.1のテキスト表示</dd>
    <dt>アコーディオンメニュー.2</dt>
    <dd>アコーディオンメニュー.2のテキスト表示</dd>
    <dt>アコーディオンメニュー.3</dt>
    <dd>アコーディオンメニュー.3のテキスト表示</dd>
    <dt>アコーディオンメニュー.4</dt>
    <dd>
        <ul>
            <li>箇条書きにliタグを入れてみました。</li>
            <li>箇条書きにliタグを入れてみました。</li>
            <li>箇条書きにliタグを入れてみました。</li>
            <li>箇条書きにliタグを入れてみました。</li>
        </ul>
    </dd>
</dl>
css
上記に記載済み

気をつける事とすれば、ユーザーに「この部分がアコーディオン表示である」ということをわからせるデザインにしないといけないということ。
ユーザーに使ってもらえないと、アコーディオンを設置した意味がありませんからね。

ユーザビリティを上げるために設置したつもりが、返って悪い方向になってしまっていたら撤去するのが望ましいです。

PAGE TOP