2012

3

31

『jQueryで簡単アコーディオン作ってやんよ!!』

スポンサードリンク


スマホサイトなどでよくある開閉式のアコーディオンをjQueryと少しのJavaScript記述で作りたいと思います。

jQueryの設定
jQueryライブラリを使用するのでCDNの記述を忘れずに!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
HTMLの記述
<dl>
<dt class="accordion">ときどきWEB</dt>
<dd>
    <ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>jQuery</li>
	<li>Android</li>
    </ul>
</dd>
</dl>

dl要素をアコーディオンの入れ子としアコーディオン全体のボックスを作成。

引き出し部分の役割としてdt要素にアコーディオンのタイトルとaccordionクラスを指定し。

dd要素にアコーディオン内に入れたい要素を記述。
cssの記述
 * {
	margin:0;
	padding:0;
}
dl {
	width: 320px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
}

dt.accordion{
    width: 100%;
    height: 50px;
	line-height: 50px;
    color:#FFF;
    background:#06F url(bg_bar.png) no-repeat;
    -webkit-background-size:100%;
}
 
dt.accordion.opened {
    background-image:url(icon.png), url(bg_bar.png);
    background-repeat: no-repeat,no-repeat;
    background-position:0% 0%,0% 0%;
    -webkit-background-size:0% 0%,100%;
}
 
dd {
    width: 100%;
    background: url(icon02.png) no-repeat;
}

dd ul li{
	list-style: none;
	height:30px;
	line-height: 30px;
	background:#09F;
}

 

主にアコーディオン全体の幅、引き出し部の装飾、内部の背景色など。
javascriptの記述
$(function(){
	$("dd").after().hide();
	$("dt.accordion").click(function(){
		$(this).toggleClass("open").next().slideToggle();
	});
});

accordionの内部(dd)以降の要素を初期設定で隠す。

accordionの引き出し部(dt)をクリックすると起こるアクションを設定。

③前者の指定部分をtoggleClassで開く。開く動作はslideToggleを利用。

これでタイトル要素をクリックすると開閉するアコーディオンが完成。


デモページ①

上記のアコーディオンスクリプトを実装したデモページがこちら


アコーディオン機能の拡張

アコーディオン内容自体が少ない場合は問題ないですが、

内容が長くなりすぎてしまうと、ページスクロールで上まで戻ってタイトル部をクリックしないと閉じられないのはよろしくないので

内部の中に閉じるアクションを追加します。
HTMLの追加
<dl>
<dt class="accordion">ときどきWEB</dt>
<dd>
    <ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>jQuery</li>
	<li>Android</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
	<li>・・・・</li>
    </ul>
    <div class="close">close</div>
</dd>
</dl>


アコーディオン内部の最後にcloseクラスを記述し、閉じる要素を作成

javascriptの修正

$(function(){
	$("dd").after().hide();
	$("dt.accordion").click(function(){
		$(this).next().slideToggle();
	});
	$("dd .close").click(function(){
		$(this).parent().slideToggle();
	});
});

dd要素内のcloseクラスをクリックすると、
その親要素(dd)にslideToggleアクションを起こす記述を指定

(一度内部を開く事でしかcloseクラスをクリックする事ができないため、結果的に閉じるアクションになる)



これで最下部の要素(今回の場合はテキスト)をクリックすることでも閉じる事が可能になった!

デモページ②

上記のアコーディオンスクリプトを実装したデモページがこちら


アコーディオンの初期設定を変更

アコーディオンを連続で設置するとデザインによっては開閉アクションの有無がユーザーに伝わりにくいなどの場合があるので、対応として指定の箇所のアコーディオンを初期設定として開いておく記述。
JavaScriptの記述
$(function(){
	$("dd:not(:first)").after().hide();
	$("dt.accordion").click(function(){
		$(this).next().slideToggle();
	});
	$("dd .close").click(function(){
		$(this).parent().slideToggle();
	});
});

最初のクラス指定個所に『:not(:first)』と記述。

つまり1番目以外は隠す(閉じる)指定。

first』を任意の数に変更したり、『hide』を『show』に変えたりで好きな指定ができます、ハイ。

デモページ③

上記のアコーディオンスクリプトを実装したデモページがこちら


便利だね!jQuery!!

トップへ