スマホで使えるjQuery アコーディオンメニュー

2014-03-022015-02-22

スマートフォンで活用大のアコーディオンメニュー。

jqueryなら実装がカンタン。
dlパターン
htmlはこんな感じ

<section id="demo1">
            <dl>
                <dt>アコーディオン1</dt>
                <dd>アコーディオン1の中身</dd>
                <dt>アコーディオン2</dt>
                <dd>アコーディオン2の中身</dd>
                <dt>アコーディオン3</dt>
                <dd>アコーディオン3の中身</dd>
                <dt>アコーディオン4</dt>
                <dd>アコーディオン<br>
                アコーディオン<br>アコーディオン
                <br>アコーディオン<br>アコーディオン</dd>
            </dl>
 </section>

javascriptは

$(function(){
            $("#demo1 dt").on("click", function(){
                $(this).next().slideToggle();
                $(this).toggleClass("active");
            });
        });

css

#demo1 dl {
  border-bottom: 1px solid #ddd;
}
#demo1 dt {
  display: block;
  padding: .6em 1em;
  border: 1px solid #ddd;
  border-bottom: none;
  cursor: pointer;
}
#demo1 dt:after {
  display: inline-block;
  float: right;
  font-family: 'Genericons';
  content: 'f431';
  text-align: right;
}
#demo1 dt.active:after {
  font-family: 'Genericons';
  content: 'f432';
}
#demo1 dd {
  display: none;
  padding: .3em 1em;
  background: #efefef;
  border: 1px solid #ddd;
  border-top: none;
}

ulを使うパターン

<section id="demo2">
        <ul class="acdMenu">
            <li>
                <div>アコーディオン1<span></span></div>
                <ul>
                    <li><a href="#">アコーディオン1の子1</a></li>
                    <li><a href="#">アコーディオン1の子2</a></li>
                    <li><a href="#">アコーディオン1の子3</a></li>
                </ul>
            </li>
            <li>
                <div>アコーディオン2<span></span></div>
                <ul>
                    <li><a href="#">アコーディオン2の子1</a></li>
                    <li><a href="#">アコーディオン2の子2</a></li>
                    <li><a href="#">アコーディオン2の子3</a></li>
                </ul>
            </li>
            <li>
                <div>アコーディオン3<span></span></div>
                <ul>
                    <li><a href="#">アコーディオン3の子1</a></li>
                    <li><a href="#">アコーディオン3の子2</a></li>
                    <li><a href="#">アコーディオン3の子3</a></li>
                </ul>
            </li>
            <li><a href="#">アコーディオン4</a></li>
            <li><a href="#">アコーディオン5</a></li>
        </ul>
</section>

$("#demo2 div").click(function(){
            $(this).next("ul").slideToggle();
            $(this).toggleClass("active");
        });

デモ