【jQuery】アコーデオンメニューのサンプルソース

サンプル

タイトルをクリックするとアコーデオンでメニューが開閉する割とシンプルなソースのサンプル。

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でアコーデオンメニューを作成することも可能です。

Vue.jsで実現したいとき