問題 × 解決策

シンプルなアコーディオンの実装方法

問題

アコーディオンを簡単に実装したい。

解決策

アコーディオン用の要素を作り、開閉をクリック操作するクラス、開閉させるコンテンツのクラスを決めて構築する。

 

アコーディオンの構築

クリックで開閉する、シンプルなアコーディオンの実装方法をご紹介します。

まず、HTMLの構築を行います。

リストで設定していきます。
クリックする要素をクラス「switch」、開閉する要素をクラス「target」として進めていきます。

<ul class="accordion-list">
<li>
<p class="switch">開閉スイッチ ↓</p>
<p class="target">開閉するコンテンツ</p>
</li>
<li>
<p class="switch">開閉スイッチ ↓</p>
<p class="target">開閉するコンテンツ</p>
</li>
<li>
<p class="switch">開閉スイッチ ↓</p>
<p class="target">開閉するコンテンツ</p>
</li>
<li>
<p class="switch">開閉スイッチ ↓</p>
<p class="target">開閉するコンテンツ</p>
</li>
<li>
<p class="switch">開閉スイッチ ↓</p>
<p class="target">開閉するコンテンツ</p>
</li

次にCSSの構築を行います。

クラス「switch」とクラス「target」に、適宜cssを設定します。

.accordion-list > li{
	margin-bottom: 20px;
}
.accordion-list > li .switch{
	margin-bottom: 0;
	padding: 10px;
	color: #F15A24;
	font-weight: bold;
	background-color: #FCECE8;
	cursor: pointer;
}
.accordion-list > li .target{
	display: none;
	padding: 10px;
	background-color: #fff8af;
}

最後にjavascriptの構築を行います。

クラス「switch」をクリックするとクラス「target」が開閉するように、設定を行います。

$(function() { if( $('.accordion-list').length ){ $('.accordion-list > li .switch').click(function(){ $(this).siblings('.target').slideToggle(); }) } });

DEMOはこちら

  • 開閉スイッチ ↓

    開閉するコンテンツ

  • 開閉スイッチ ↓

    開閉するコンテンツ

  • 開閉スイッチ ↓

    開閉するコンテンツ

  • 開閉スイッチ ↓

    開閉するコンテンツ

  • 開閉スイッチ ↓

    開閉するコンテンツ

     

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

18 − 2 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧