The current article
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery
スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。
シンプルなコードで動作しますので、実装してみてはいかがでしょうか。
capture
デモページ DEMO
説明
今回は2種類のアコーディオンを紹介します。
1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。
なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。
JS
$(function(){
$(".accordion p").click(function(){
$(this).next("ul").slideToggle();
$(this).children("span").toggleClass("open");
});
$(".accordion dt").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
});
});
jquery本体と、
上記スクリプトをコピーして「accordion.js」などというファイルを作成して読み込ませて下さい。
（head内に書く場合は<script type=”text/javascript”>と</script>で囲んで下さい）
簡単な説明ですが、
3～6行目が「ul」用で、
3行目、pを押すと、
4行目、次にあるulを開く（閉じる）
5行目、pの子のspanにクラスopenをつける（外す）
8～13行目が「dl」用で、
8行目、dtを押すと、
9行目、押したdtの次のddが開く（閉じる）
10行目、押したdtの次のdd 以外の dd を閉じる
11行目、押したdtにクラスopenをつける（外す）
12行目、押したdt 以外の dtからクラスopenを外す
となります。
「ul」だけ使うなら、8～13行目を、 「dl」だけ使うなら、3～6行目を消しても大丈夫です！
HTML
HTML内に以下を記述します。
ul用
<ul class="accordion">
<li>
<p><span>リスト 1</span></p>
<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>
<p><span>リスト 2</span></p>
<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>
<p><span>リスト 3</span></p>
<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>
</ul>
上記のように、ul要素を入れ子（ul liの中にul li）にします。
pタグ部分が開閉スイッチになります。
dl用
<dl class="accordion">
<dt>タイトル１</dt>
<dd>サンプルテキスト</dd>
<dt>タイトル２</dt>
<dd>サンプルテキスト</dd>
<dt>タイトル３</dt>
<dd>サンプルテキスト</dd>
<dt>タイトル４</dt>
<dd>サンプルテキスト</dd>
</dl>
dtタグ部分が開閉スイッチになります。
CSS(3)
CSS内に以下を記述します。デモページの例だと
ul用
ul.accordion { background:#DDD; width:80%; margin:0 auto 30px; padding:10px; font-size:16px;}
ul.accordion a { display:block; padding:10px; background-position:97% center; background-repeat:no-repeat; text-decoration:none; color:#333; font-weight:bold;}
ul.accordion span { display:block; padding:10px; background-position:97% center; background-repeat:no-repeat; color:#333; font-weight:bold;}
ul.accordion ul { display:none;}
ul.accordion > li { background: -moz-linear-gradient(top, #C6F0FE, #27BCF9); background: -webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
ul.accordion > li > p { background: -moz-linear-gradient(top, #C6F0FE, #27BCF9); background: -webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));cursor:pointer;}
ul.accordion > li > p span { background-image:url(../img/open.png);}
ul.accordion > li > p span.open { background-image:url(../img/close.png);}
ul.accordion > li > ul > li { background:#999; border-bottom:1px solid #EEE;}
ul.accordion > li > ul > li > p { background:#999;}
ul.accordion > li > ul > li > a { background:url(../img/go.png) no-repeat 98% center;}
ul.accordion > li > ul > li > ul > li { background:#FFF; border-bottom:1px dotted #888;}
ul.accordion > li > ul > li > ul > li:last-child { border:none;}
dl用
dl.accordion { background:#DDD; width:80%; margin:0 auto 30px; padding:10px; font-size:16px;}
dl.accordion dt {
background:url(../img/open.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/open.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));
border-bottom:1px solid #EEE; height:40px; text-indent:10px; line-height:40px; color:#333; font-weight:bold; cursor:pointer;}
dl.accordion dt.open {
background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd { background:#FFF; padding:10px; line-height:1.5; display:none;}
となります。
どちらもブラウザに合わせて可変しますので、スマートフォンに対応出来ます。
スマートフォンサイト制作ブログさんに教えて頂きました。ありがとうございます！
以上、「スマートフォンにも使える、クリックで開くアコーディオンメニュー」のご紹介でした。
関連記事
