30DAYSトライアル2nd

デイトラ(30DAYSトライアル)中級コース(2nd)まとめ【DAY25】

デイトラ(30DAYSトライアル)中級コース(2nd)の課題は『Q and Aをアコーディオンでコーディング』です。

DAY24までのコードにQ&Aのレイアウトを追加して、アコーディオンの動きをつけることになります。

アコーディオンについてはProgateのjQuery中級編でも厚割れているので、分からなければそちらを参考にすると良いと思います。

アコーディオンとは

Q&Aの場合ではまずは質問のみが表示されており、その質問をクリックすると質問の下に回答が表示されるというようなものですね。

回答が表示される様子がアコーディオンを伸ばしているような動きになっているので、アコーディオンと呼ばれています。

参考までに僕が実装したものは以下になります。

アコーディオンを伸ばしてるようでしょ?




デイトラ(30DAYSトライアル)中級コースDAY25の仕様

僕が実装したものの動画からイメージは掴めるかと思いますが、以下のような仕様で作成しています。

  • 初期状態では質問のみが表示されている
  • 回答が表示されていない状態で質問のいずれかの場所をクリックしたらそれに対応しした回答が質問の下に表示され、質問の「+」表示が「-」に切り替わる
  • 回答が表示されている状態で質問のいずれかの場所をクリックしたら回答が非表示になり、質問の「-」が「+」に切り替わる
  • 背景色は任意の色




デイトラ(30DAYSトライアル)中級コースDAY25の実装

デイトラ(30DAYSトライアル)中級コースDAY25の実装はDAY24までのレイアウトにQ&Aがないため、レイアウトの追加から行う必要があります。

レイアウトの追加

僕は以下のようなHTMLの構成にしました。

実装

実装方法は以下の通りです。

  1. 回答の初期スタイルを非表示にする
  2. 回答を表示する用のクラスを用意する
  3. 質問のクリックイベントで、回答を表示するクラスを持っているかどうかで処理を分岐する
  4. 回答を表示するクラスを持っている場合:回答に回答を表示するクラスを追加する(+を-にかえる)
  5. 回答を表示するクラスを持っていない場合:回答に回答を表示するクラスを削除する(-を+にかえる)

実際のコードです。




感想・まとめ

ポイントは+の表示を−に変えると中心がずれるので、topの位置を調整してあげたことぐらいですかね。

それ以外はProgateを復習したら、分かるので特に難しくないはずです。

最終改題まであと1日分。

引き続き頑張っていきましょう!!

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す