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

Mon, 31 Oct 2022 19:35:21 +0900

サンプル

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

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

https://getbootstrap.jp/docs/5.0/components/accordion/ https://getbootstrap.jp/docs/5.0/components/accordion/

Vue.jsで実現したいとき

https://mykii.blog/nuxt-accordion-slide-toggle/ https://mykii.blog/nuxt-accordion-slide-toggle/

https://777-webdesigner.net/portfolio2/538/ https://777-webdesigner.net/portfolio2/538/

https://pote-chil.com/vue-js_accordion/ https://pote-chil.com/vue-js_accordion/