[js基礎④] JavascriptでFAQをふわっと開きたい。

2024年12月8日

今回で4回目となったjs基礎シリーズ。
今回はFAQをふわっと開閉させる実装です。

以前の記事で、単純にボタンクリックで開閉する実装は紹介しました。
仕組みとしてはこれで良いのですが、動きがカクカクとしいてなんかダサい。

ということで今回は開閉時にふわっと開くようにします。

実際のコード

下記のResultタブより動きを確認できます。
ふわっと開閉します。

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

以下は実装の説明です。

・cssで回答部分のmax-heightを0にして、初期状態を非表示にする
その際にcssにtransitionを設定して、スムーズな開閉にしています。


.faq__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  transition: max-height 0.5s ease;
}

・またis-openクラスがついた時に、max-heightが設定されるようにしています。

.faq__item.is-open .faq__answer {
  max-height: 100px; /* 固定の高さ */
}

・質問をクリックすると、is-openクラスをつける

document.querySelectorAll('.faq__question').forEach((question) => {
  question.addEventListener('click', () => {
    const item = question.parentElement;

    // 開閉の切り替え
    if (item.classList.contains('is-open')) {
      item.classList.remove('is-open');
    } else {    
      item.classList.add('is-open');
    }
  });
});

document.querySelectorAllで引数に設定した質問を全て取得します。
if文の中で、もしも質問部分(.faq-question)にis-openがついてれば、is-openを外す。
→閉じた状態を表現

反対にもしもis-openがついていなければ、is-openをつける。

cssにtransitionを設定してるので、0.5秒かけて高さを変えるという設定にしています。

補足：高さを可変にする

前のセクションまでで、基本的なふわっとアニメーションは実装できました。
ただ問題は高さを100pxというふうに固定値にしていること。

これだと回答が長い時に全て表示できません。
と言うことで回答の長さに応じて、max-heightを変えます。

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

回答部分のmax-heightをnoneに設定します。
高さはjavascript側で動的に取得します。

 .faq__answer {
  max-height: none; 
}

answer.style.maxHeight を状態に合わせて変更します。
”.concat(answer.scrollHeight, ‘px’); は、それぞれの回答部分の高さを取得します。
scrollHeightで要素の全体の高さを取得できます。

document.querySelectorAll('.faq__question').forEach((question) => {
  const answer = question.nextElementSibling; 
  answer.style.maxHeight = ''.concat(answer.scrollHeight, 'px'); 
  question.addEventListener('click', () => {
 
    // 開閉の切り替え
    if (answer.style.maxHeight !== '0px') {
     answer.style.maxHeight = '0px'; // 閉じる
    } else {
     answer.style.maxHeight = ''.concat(answer.scrollHeight, 'px'); 
    }
  });
});

クリックしたときに、
maxHeightが0px以外の時(開いてる時)は、maxHeightを0にする。

反対に0pxの時は、maxHeightをscrollHeightメソッドで動的に取得します。

以上これで答え部分の長さが変わっても対応できます。