問題
アコーディオンを簡単に実装したい。
解決策
アコーディオン用の要素を作り、開閉をクリック操作するクラス、開閉させるコンテンツのクラスを決めて構築する。
アコーディオンの構築
クリックで開閉する、シンプルなアコーディオンの実装方法をご紹介します。
まず、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はこちら
-
開閉スイッチ ↓
開閉するコンテンツ
-
開閉スイッチ ↓
開閉するコンテンツ
-
開閉スイッチ ↓
開閉するコンテンツ
-
開閉スイッチ ↓
開閉するコンテンツ
-
開閉スイッチ ↓
開閉するコンテンツ
コメント