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>タイトル1</dt>
    <dd>サンプルテキスト</dd>
    <dt>タイトル2</dt>
    <dd>サンプルテキスト</dd>
    <dt>タイトル3</dt>
    <dd>サンプルテキスト</dd>
    <dt>タイトル4</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;}

となります。
どちらもブラウザに合わせて可変しますので、スマートフォンに対応出来ます。

スマートフォンサイト制作ブログさんに教えて頂きました。ありがとうございます!

以上、「スマートフォンにも使える、クリックで開くアコーディオンメニュー」のご紹介でした。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。