2017/02/09

超簡単なjQUeryアコーディオンの作り方

クリックすると開閉するメニュー、アコーディオンの超簡単な作り方を説明します。jQueryを使った簡単なアコーディオンなので初心者でも1から作成可能です。

まずは仕上がり例を確認

デモページ

作成方法

まずはHTM部分を作りましょう。ul要素でリストを作成し、li要素にクリックで開閉させる為にクラス属性にopenを指定。入れ子でさらにulを追加し通常時は閉じさせる為にクラス属性にchildrenを指定。

<div id="accordion">
<ul>
<li class="open"><a href="#" >カテゴリ01</a>
	<ul class='children'>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	</ul>
</li>
<li class="open"><a href="#" >カテゴリ02</a>
	<ul class='children'>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	</ul>
</li>
<li class="open"><a href="#" >カテゴリ03</a>
	<ul class='children'>
	<li>タイトル</li>
	<li>タイトル</li>
	</ul>
</li>
<li class="open"><a href="#" >カテゴリ04</a>
	<ul class='children'>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	<li>タイトル</li>
	</ul>
</li>
</ul>
</div>

次にcssを書いていきます。ここではchildrenを指定したulにdisplay:none;で非表示にしているだけ。その他記述は簡単なデザインを付けているだけなのでページによって変更してください

#accordion {
margin:0;
padding:0;
width:100%;
}
#accordion ul li ul.children {
display:none;
}
#accordion ul li {
background:#f2f2f2;
margin:0 0 0 12px;
padding:5px 8px;
}

開閉させる為のjavascriptを書いてjQueryで読み込めば完成です。

jQuery.noConflict();
(function($) {
    $(function(){
        $('.open').each(function(){
            $(this).find('a').first().on('click', function() {
                $(this).next().slideToggle(100);
                $(this).toggleClass('current');
                return false;
            });
        });
    });
})(jQuery);