$('.js-button').on('click', function() { $(this).next('.js-accordion').slideToggle(); }); cssアニメーション jQueryなしで実装する場合は、cssアニメーションを使います。 パフォーマンス的にも、jQueryのアニメーションではなくcssのアニメーションを使用した方が良いです。 (なので、jQueryは開閉のトリガーだけに使用し、アニメーションはcssで行う方法もあります。) ただ、アコーディオンするコンテンツの高さが可変の場合、ちょっと面倒です。。 まずは、開閉のトリガーのみをjsで設定します。 const button = document.querySelectorAll('.js-button'); const openClass = 'is-expand'; Array.prototy
![CSSアニメーションで高さ可変のアコーディオン - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5de6cc04b7e7c64604ddae422ca4c54956e4c960/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJUE3JUU5JUFCJTk4JUUzJTgxJTk1JUU1JThGJUFGJUU1JUE0JTg5JUUzJTgxJUFFJUUzJTgyJUEyJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgyJUFBJUUzJTgzJUIzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03ZDI0NzU3ODAyYzVhY2UyNjMyNjBjY2I4ODY4NzEwZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoYXJhZGEtayZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODkyYjdhN2ViMGQ5NWRhZTY2MjJhMjAxMTM0Y2I0NmY%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2596192f50795aa6094d330546fed517)