[js基礎③] JavascriptでFAQを作る方法

今回で3回目のjs基礎。今日はこれまた頻出のFAQの作り方を説明します。

FAQは多くのWebサイトに配置されるため、頻出で使います。
仕組みを理解すれば、素早く実装できるのでおすすめです。

FAQの作り方

さて早速FAQの作り方です。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

クリックすると答えが開閉できます。
ここから実装の説明です。

①全てのfaqアイテムを取得する。
faqは基本的に複数あります。なので全ての要素をまず取得するというステップが必要です。
下記コードの、document.querySelectorAllに、引数を渡す。これで全ての要素を取得できます。

var items = document.querySelectorAll('.faq-question')

②全ての要素に、クリックイベントをつける。
forEach文は、最初に取得したitems要素を全て展開するという構文です。
そしてその構文の中で、一つ一つにclickイベントをつけるという仕組みです。
(クリックすると処理が起動します。)

items.forEach(function (question) {
  question.addEventListener('click', function () {

  });
});

③クリックした要素の答えを開く

次にクリックした要素の答えだけを開きます。
nextElementSibling　で兄弟要素を取得します。
thisは、クリックした要素(faq-question)を指します。その隣の要素、つまりfaq-answerを取得します。

const answer = this.nextElementSibling;

④状態に合わせてdisplayを切り替える

最後に今の状態に合わせて、display:block; display:none;を切り替えます。
cssで.faq-answerの初期状態はdisplay: none;です。
noneの時にクリックすると、display: block;になる。
反対にblockの時にクリックすると、display: none;になる。

このようにして開閉を表現しています。

    if (answer.style.display === 'block') {
      answer.style.display = 'none';
    } else {
      answer.style.display = 'block';
    }

ここまでで開閉処理が実現できました。

まとめ

今回はWeb制作で頻出のFAQの開閉処理についてまとめました。

全体の流れを理解すれば簡単に実装できるので、今回の記事が参考になれば幸いです。