2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
アコーディオンは、LPの「よくある質問」などでよく利用されていますね。
「Q 質問」をクリックすることで、「A答え」が開閉されるような動作です。
アコーディオンは、一見難しそうですがjQueryとCSSで簡単に実装することができます。
目次
一応アコーディオンとは何かご説明すると、クリックでコンテンツを開閉することができる機能のことです。
本来アコーディオンは、「一方を開いたら、連動して他方を閉じる(常に1つしか開かない)」動作をする機能のことをいいます。
しかし、実装が簡単かつ使い勝手がいいことから、「連動することなくシンプルにクリックで開閉するだけ」という動作がよく使われています。(この場合ドロップダウンと呼ぶのが正しいかもしれませんね)
今回は使い勝手のいい後者のアコーディオンの実装方法をご紹介します！
実際にWebサイトに実装する時はいろいろとスタイルを整えておしゃれにしますが、まずはわかりやすいように動きのみを確認できるアコーディオンを作ってみましょう。
以下、サンプルコードです。
質問の領域をクリックすると答えが下からニュッと出てきます！
See the Pen accordion by spiqa design (@spiqa_design) on CodePen.
各言語ごとに解説します！
開閉するコンテンツをdisplay: none;で非表示にします。
これを指定しておかないと、最初からコンテンツが開いた状態になります。
CSSで対応することはこれだけです。
タイトル(クリックする箇所)のクラスをjqueryに指定します。
デモの場合は、toggle_titleです。
どういう内容が書かれているか簡単に説明しますと、
「toggle_titleをクリックしたら、次の要素(dd)を開閉してね」という命令をしています。
シンプルなアコーディオンを実装したところで、少し応用を取り入れたアコーディオンを作ってみましょう。
シンプルなアコーディオンだと、クリックしてコンテンツが表示されるというのが見た目ではわかりづらいです。
そこで、開閉に応じて「＋」と「−」が切り替わる、というアコーディオンを作ってみましょう！
視覚的に開いているか閉じているのかわかりやすいのでおすすめです！
See the Pen accordion-styled by spiqa design (@spiqa_design) on CodePen.
追加したのは、.plusのスタイルのみです！
.toggle_titleに.selectedがついている時は、＋を−にするという記述を忘れずに記述しましょう。
もっと「ここアコーディオンです！」とわかりやすくする場合は、最初のアコーディオンだけ開いておくというのもありです！
See the Pen accordion-first-open by spiqa design (@spiqa_design) on CodePen.
HTMLで最初の.toggle_titleに.selectedをつけておき、CSSで最初の.toggle_ansにdisplay: block;を指定するだけです！
あとはWebサイトのデザインに合わせてアコーディオンにスタイルを加えてください！
とても簡単なコードですが、都度書くとなると面倒なのでコピペでご活用いただけると幸いです！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/