【JavaScript】アコーディオンパーツ集

「HTMLとCSS、JavaScriptのコーディングで悩む時間を減らしたい」という思いから、実際に実装したものをテンプレート化しています。

【Webデザイナーの方へ】
・デザインの参考資料として
・コーダーへの具体的な指示書として

【Webコーダーの方へ】
実装済みのコードをベースに使うことで、コーディング時間を大幅に短縮できます。

作業の効率化に、ぜひお役立てください。

ソースコード(HTML,CSS,JavaScript)は2通りの確認方法があります。

1. 「プレビューボタン」下の各コードのボタンをクリック。するとGitHubの該当ページが開きます。
  Webコーダーの方は、こちらの方が参考にしやすいと思います。
2. 「プレビュー」で右クリックしていただけるとご覧いただけます。
  とりあえず、コードをコピペして実装したい方、HTMLコードを確認したい方はこちらをご利用ください。

目次

開閉時に矢印が変わる(Vanilla JavaScript)

親要素.p-faq-qaに.is-activeクラスを付与すると、アコーディオンが開いた状態になります。

jQuery不要です。HTMLとCSS、Vanilla JavaScriptだけで実装しています。

開閉時に+-アイコンが変化(Vanilla JavaScript)

親要素.p-faq-qaに.is-activeクラスを付与すると、アコーディオンが開いた状態になります。

jQuery不要です。HTMLとCSS、Vanilla JavaScriptだけで実装しています。

WEBもがき道場

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次