この記事は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