アコーディオン

オプションの変更方法

JavaScriptでの変更

Accordionのコンストラクタは、第2引数にオプションをとります。

new Accordion(".c-accordion-js", {
  duration: 300,
  easing: "ease",
});
Q よくある質問のタイトルがここに入ります
A

こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。

<details class="c-accordion-js">
<summary class="c-accordion_summary-js">
<span class="c-accordion_icon-js -question">Q</span>
よくある質問のタイトルがここに入ります
<span class="c-accordion_switch-js"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents-js">
<span class="c-accordion_icon-js -answer">A</span>
<div class="c-accordion_answer-js">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</div>
</div>
</details>

単純な構成のコーディンを実装したい場合は、Astroコンポーネントでの実装も可能です。

Q ここにはタイトルが入ります。HTMLタグを含めることもできます。
A

こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。

<Accordion title="ここにはタイトルが入ります。<br />HTMLタグを含めることもできます。">
  <p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true" />こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</Accordion>

オプション

オプション 概要
duration アニメーションの実行時間をミリ秒で指定します。
easing アニメーションのイージング関数を指定します。

duration

duration: number = 150

アニメーションの実行時間をミリ秒で指定します。

new Accordion(".c-accordion-js", {
  duration: 1000
});
Q duration: 1000 を指定した場合のアコーディオン
A

こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。

<details class="c-accordion-js">
<summary class="c-accordion_summary-js">
<span class="c-accordion_icon-js -question">Q</span>
duration: 1000 を指定した場合のアコーディオン
<span class="c-accordion_switch-js"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents-js">
<span class="c-accordion_icon-js -answer">A</span>
<div class="c-accordion_answer-js">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</div>
</div>
</details>

easing

duration: string = "ease-out"

アニメーションのイージング関数を指定します。

new Accordion(".c-accordion-js", {
  easing: "steps(5)",
  duration: 3000,
});
Q easing: "steps(5)" を指定しているため、5回に分割されたステップでアニメーションが実行されます。
A

こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。

<details class="c-accordion-js">
<summary class="c-accordion_summary-js">
<span class="c-accordion_icon-js -question">Q</span>
easing: "steps(5)" を指定しているため、5回に分割されたステップでアニメーションが実行されます。
<span class="c-accordion_switch-js"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents-js">
<span class="c-accordion_icon-js -answer">A</span>
<div class="c-accordion_answer-js">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</div>
</div>
</details>