制作のご相談はこちら
開閉アイコン付きアコーディオンサンプル作成しました

公開日 : 2018年01月04日

開閉アイコン付きアコーディオンサンプル作成しました

長いコンテンツになってしまう際に便利なアコーディオンのサンプルコードを作成しました。
今回は開閉アイコンを付けてみました。
アイコンは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