まずjQueryをlinkでつける
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
上記をheadタグに置いておく
そして、以下のような構成のhtmlを書く
<div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button">ボタンだよ</button> </h2> <div class="accordion-collapse"> <ul> <li>aaa</li> </ul></div></div>
そして以下のようなstyleを入れる。
<style> .accordion-header { position: relative; cursor: pointer; transition: all .5s ease; } .accordion-header::before, .accordion-header::after{ position: absolute; } .accordion-collapse { display: none; }</style>
あとはjavascriptのコードを入れるだけ
<script> $(document).ready(function() { $('.accordion-button').on('mouseover', function() { var findElm = $(this).parent().next(".accordion-collapse"); $(findElm).slideToggle(); }); }); $(document).ready(function() { $('.accordion-item').on('mouseleave', function() { $(".accordion-collapse").slideUp(500); }); });</script>
cssに関してはChatGPTなどで肉付けしてもらうと良いでしょう。