slideToggleを使ってアコーディオンを簡単に作る方法

今回はクリックするとコンテンツがスライドして表示されるアコーディオンの作り方を紹介します。

jQueryのslideToggleを使えば簡単にできます。

 

アコーディオンの仕組み

アコーディオンは主にメニューなどで使われることが多いです。

例えばカテゴリーをクリックするとその下の子カテゴリーが下にスライドして表示されるといった具合です。

アコーディオンを作るにはjQueryのslideToggleメソッドを使用します。というかほぼこれしか使わないです。

思ったよりも簡単に作れるので安心してください。

なお、CSSは説明上不要なので無視します。

 

アコーディオンを作成

HTML

今回はメニューにアコーディオン機能をつけて作成してみます。

まずはHTMLです。メニューなので<ul>でマークアップします。

あとでjQueryのイベントを登録するため、クラスをつけておく必要があります。今回はsyncer-acdnといクラスをつけます。

<ul>
	<li><p><a class="syncer-acdn">メニュー1</p></li></a>
	<li><p><a class="syncer-acdn">メニュー2</p></li></a>
</ul>

 

続いて、<li>のなかに子メニューを用意します。

子メニューも<ul>と<li>で同じようにマークアップします。

親メニューの<li>をクリックするその子要素である<ul>にslideToggleが実行されるというスクリプトにします。

<ul>
	<li><p><a class="syncer-acdn">メニュー1</a></p>
		<ul>
			<li>子メニュー 1-1</li>
			<li>子メニュー 1-2</li>
		</ul>
	</li>
	<li><p><a class="syncer-acdn">メニュー2</a></p>
		<ul>
			<li>子メニュー 2-1</li>
			<li>子メニュー 2-2</li>
		</ul>
	</li>
</ul>

次にいくらメニューを増やしてもちゃんと動作するように子メニューの<ul>を繋ぐIDを指定しておきましょう。

今回はsyncer-acdn-01、syncer-acdn-02というIDにします。

<ul>
	<li><p><a class="syncer-acdn">メニュー1</a></p>
		<ul id="syncer-acdn-01">
			<li>子メニュー 1-1</li>
			<li>子メニュー 1-2</li>
		</ul>
	</li>
	<li><p><a class="syncer-acdn">メニュー2</a></p>
		<ul id="syncer-acdn-02">
			<li>子メニュー 2-1</li>
			<li>子メニュー 2-2</li>
		</ul>
	</li>
</ul>

 

トリガーとなる<a>にはdata-target属性を追加し、その値にはターゲットのIDを指定します。

すると以下のようになります。

<ul>
	<li><p><a class="syncer-acdn" data-target="syncer-acdn-01">メニュー1</a></p>
		<ul id="syncer-acdn-01">
			<li>子メニュー 1-1</li>
			<li>子メニュー 1-2</li>
		</ul>
	</li>
	<li><p><a class="syncer-acdn" data-target="syncer-acdn-02">メニュー2</a></p>
		<ul id="syncer-acdn-02">
			<li>子メニュー 2-1</li>
			<li>子メニュー 2-2</li>
		</ul>
	</li>
</ul>

 

jQuery

ではスクリプトを書いていきます。

トリガーとなっている<a>をクリックしたタイミングでdata-target属性を読み込み、その値と同じIDをもつ要素に対してslideToggleを実行するというスクリプトにします。

こうしておくことでいくら要素が増えてもjQueryは書き換える必要がなくなります。

 

ではクリックイベントを登録しましょう。clickメソッドを使用します。

$( '.syncer-acdn' ).click( function(){

	// 処理の記述
	// ...

} ) ;

 

続いてクリックした要素(this)のdata-target属性を読み込み、変数に格納しておきましょう。

変数の名前はなんでもいいですが、連想しやすいようにtargetとしておきます。

var target = $(this).data( 'target' ) ;

 

そうしたらslideToggleを実行して終わりです。

targetに代入された文字列を同じ名前のIDをもつ要素に対して実行すればokですね。

$( '#' + target ).slideToggle() ;

 

というわけで、jQueryのコードをまとめると以下のようになります。

$( '.syncer-acdn' ).click( function()
{
	var target = $( this ).data( 'target' ) ;

	$( '#' + target ).slideToggle() ;
} ) ;

 

コードまとめ

今回紹介したコードを全てまとめると以下のようになります。

HTML

<ul>
	<li><p><a class="syncer-acdn" data-target="syncer-acdn-01">メニュー1</a></p>
		<ul id="syncer-acdn-01">
			<li>子メニュー 1-1</li>
			<li>子メニュー 1-2</li>
		</ul>
	</li>
	<li><p><a class="syncer-acdn" data-target="syncer-acdn-02">メニュー2</a></p>
		<ul id="syncer-acdn-02">
			<li>子メニュー 2-1</li>
			<li>子メニュー 2-2</li>
		</ul>
	</li>
</ul>

 

jQuery

$(function()
{
	$( '.syncer-acdn' ).click( function()
	{
		var target = $( this ).data( 'target' ) ;

		$( '#' + target ).slideToggle() ;

		return false ;
	} ) ;
}) ;

 

また、今回はCSSでスタイルを指定していませんが、スタイルを指定するともっとかっこいいメニューになると思います。

CSSに関しては自分の好きなスタイルを指定するといいでしょう。