この記事は2018年1月4日に書かれたもので、内容が古い可能性がありますのでご注意ください。
長いコンテンツになってしまう際に便利なアコーディオンのサンプルコードを作成しました。
今回は開閉アイコンを付けてみました。
アイコンはFontAwesomeを使用しました。
デモページを作成しましたのでこちらからご確認ください。
DEMO
HTML
<ul class="accordion">
<li>
<button class="button">コンテンツ1</button>
<div class="nest">
<ul class="accordion_1">
<li>
<button class="button button_1">コンテンツ1_1</button>
<div class="nest">
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
</div>
</li>
</ul>
</div>
</li>
<li>
<button class="button">コンテンツ2</button>
<div class="nest">
<ul class="accordion_1">
<li>
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
</li>
</ul>
</div>
</li>
<li>
<button class="button">コンテンツ3</button>
<div class="nest">
<ul class="accordion_1">
<li>
<button class="button button_1">コンテンツ3_1</button>
<div class="nest">
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
<a href="">テキスト■テキスト■</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
CSS
.accordion {
width: 300px;
}
.button {
padding: 10px;
width: 100%;
background-color: #1abc9c;
color: #fff;
cursor: pointer;
position: relative;
}
.button.button_1 {
background-color: #f5f4f2;
color: #1abc9c;
}
.button:after {
content: "\f067";
font-family: FontAwesome;
position: absolute;
top: 11px;
right: 13px;
}
.button.active:after {
content: "\f068";
}
Javascript
$(".accordion li .nest").hide();
$(".accordion .button").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
入れ子になった場合にも使用できますので、カテゴリーリストに使うのもおすすめです。
デモページを作成しましたのでこちらからご確認ください。
DEMO