【HTML/CSS/JS】FAQページのよくあるアコーディオンを実装する方法

アコーディオンを弾く少年

サイトのリニューアル案件でFAQ部分を作ることになった。

作りたいのは、質問だけ表示されてて、クリックすると下に回答が出るシンプルなもの。

具体的にはこういうやつ。

↓ ↓ ↓

HTML/CSS/JSアコーディオン

 

クリックして開くとこうなる

↓ ↓ ↓

HTML/CSS/JSアコーディオン−2

 

【HTML/CSS/JS】FAQページのよくあるアコーディオンを実装する方法

動くコードが見たいという方は、下記のリンク先をどうぞ。

 

>> 実際のHTML/CSS/JavaScriptのコードはこちら

 

CSS超参考になった本

CSS設計完全ガイド ~詳細解説+実践的モジュール集

>> CSS設計完全ガイド ~詳細解説+実践的モジュール集

 

 

フィヨルドブートキャンプで machidaさんに紹介してもらったCSS本。ソッコーで買ったんですが、めちゃいいです。僕は個人的にはBEMという記法がしっくりきていて、その書き方で色々と実践的なコードが掲載されてます。

「同じデザインにする方法がいくつかある中で、なぜその方法を選んだのか?」みたいなところまで解説されているので、めちゃ勉強になります。というか、サイト制作に必要になってくるパーツの完全なコードがいっぱい載ってるので、すぐ実戦で使えます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください