サンプル
タイトルをクリックするとアコーデオンでメニューが開閉する割とシンプルなソースのサンプル。
.menu dl dt { cursor: pointer; } .menu dl dt, .menu dl dd { border-bottom: #CCC 1px solid; position: relative; } .menu dl dd { border: none; display: none; margin: 0 !important; } .menu dl.open dt::after { content: “ー”; } .menu dl dt::after { content: “＋”; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
$(".menu dt").on(“click”,function(){ $(this).parent().toggleClass(“open”); $(this).next().slideToggle(); });
説明①
内容①
説明②
内容②
説明③
内容③
HTML
<nav class="menu">
<dl>
<dt>説明①</dt>
<dd>内容①</dd>
</dl>
<dl>
<dt>説明②</dt>
<dd>内容②</dd>
</dl>
<dl>
<dt>説明③</dt>
<dd>内容③</dd>
</dl>
</nav>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
CSS
.menu dl dt {
cursor: pointer;
}
.menu dl dt, .menu dl dd {
border-bottom: #CCC 1px solid;
position: relative;
}
.menu dl dd {
border: none;
display: none;
margin: 0;
}
.menu dl.open dt::after {
content: "ー";
}
.menu dl dt::after {
content: "＋";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Javascript(jQuery)
$(".menu dt").on("click",function(){
$(this).parent().toggleClass("open");
$(this).next().slideToggle();
});
Bootstrapで実現したいとき
jQueryを使わず、Bootstrapでアコーデオンメニューを作成することも可能です。
