CSSのみでアコーディオンメニューの実装は可能なんですが、クリックして展開された項目の部分は他の項目がクリックされても展開されたままとなります。
ただ、案件のほとんどが「1ヶ所開いたら他は閉じてくれ」と言われるので、ほとんどの場合jQueryを使ったパターンでの実装が多いです。
CSSのみで実装するアコーディオンメニュー
checkbox要素とlabel要素を使ったシンプルなものです。予算が少ない案件はこれで十分だと思いますが…
<ul class="acd"> <li> <input id="acd-check1" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check1">タイトル1</label> <div class="acd-content"> <p>ここが中身のコンテンツ</p> </div> </li> <li> <input id="acd-check2" class="acd-check" type="checkbox"> <label class="acd-label" for="acd-check2">タイトル2</label> <div class="acd-content"> <p>ここが中身のコンテンツ</p> </div> </li> </ul>
.acd-check{
display: none;
}
.acd-label{
background: #333;
color: #fff;
display: block;
margin-bottom: 5px;
padding: 10px;
position: relative;
box-sizing: border-box;
height: 52px;
}
.acd-label::after{
background: #000;
box-sizing: border-box;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
height: 52px;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0px;
}
.acd-content{
border: 1px solid #ccc;
display: block;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label::after{
content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
height: 50px;
opacity: 1;
padding: 10px;
visibility: visible;
}
プレビューサンプル
-
ここが中身のコンテンツ
-
ここが中身のコンテンツ
jQueryを併用したアコーディオンメニュー
どこかが展開されると他は閉じるメニューです。
項目を連打する人はそうそういないと思いますが、展開処理が終わる前に項目をクリックすると、再度イベントが実行されてしまいます。これにより、連打した回数分だけイベントが実行されてしまい、マウスを項目から話してもクリックした回数分だけ展開動作が繰り返されてしまいますが、ご紹介のコードはクリック連打対策済みです。
<dl class="accordion-container" id="accordion"> <dt class="accordion-title">タイトル1</dt> <dd class="accordion-content">タイトル1のコンテンツ</dd> <dt class="accordion-title">タイトル2</dt> <dd class="accordion-content">タイトル2のコンテンツ</dd> <dt class="accordion-title">タイトル3</dt> <dd class="accordion-content">タイトル3のコンテンツ</dd> </dl>
.accordion-container .accordion-title {
position: relative;
margin: 0 0 5px 0;
padding: 0 10px;
background-color: #333;
color: #FFF;
cursor: pointer;
line-height: 45px;
transition: all .2s ease-in-out;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open {
opacity: 0.7;
}
.accordion-container .accordion-title::after {
content: "\f107";
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-weight: 900;
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
background: #000;
transition: all .2s ease-in-out;
display: block;
text-align: center;
}
.accordion-container .accordion-title.open::after {
content: "\f106";
}
.accordion-content {
padding: 10px;
border: 1px solid #CCC;
margin-bottom: 10px;
}
jQuery(function ($) {
$(".accordion-content").css("display", "none");
$(".accordion-title").click(function () {
$(".accordion-title").not(this).removeClass("open");
$(".accordion-title").not(this).next().slideUp(300);
$(this).toggleClass("open");
$(this).next().stop(true, false).slideToggle(300);
});
});
プレビューサンプル
- タイトル1
- タイトル1のコンテンツ
- タイトル2
- タイトル2のコンテンツ
- タイトル3
- タイトル3のコンテンツ
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
