アコーディオン
オプションの変更方法
JavaScriptでの変更
Accordionのコンストラクタは、第2引数にオプションをとります。
new Accordion(".c-accordion", {
duration: 300,
easing: "ease",
});Q よくある質問のタイトルがここに入ります
こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。
<details class="c-accordion">
<summary class="c-accordion_summary">
<span class="c-accordion_icon -question">Q</span>
よくある質問のタイトルがここに入ります
<span class="c-accordion_switch"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents">
<span class="c-accordion_icon -answer">A</span>
<div class="c-accordion_answer">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</div>
</div>
</details> 単純な構成のコーディンを実装したい場合は、Astroコンポーネントでの実装も可能です。
ここにはタイトルが入ります。
HTMLタグを含めることもできます。
こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。
<Accordion title="ここにはタイトルが入ります。<br />HTMLタグを含めることもできます。">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true" />こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</Accordion>オプション
| オプション | 概要 |
|---|---|
| duration | アニメーションの実行時間をミリ秒で指定します。 |
| easing | アニメーションのイージング関数を指定します。 |
duration
duration: number = 150
アニメーションの実行時間をミリ秒で指定します。
new Accordion(".c-accordion", {
duration: 1000
});Q duration: 1000 を指定した場合のアコーディオン
こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。
<details class="c-accordion">
<summary class="c-accordion_summary">
<span class="c-accordion_icon -question">Q</span>
duration: 1000 を指定した場合のアコーディオン
<span class="c-accordion_switch"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents">
<span class="c-accordion_icon -answer">A</span>
<div class="c-accordion_answer">
<p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>
</div>
</div>
</details> easing
duration: string = "ease-out"
アニメーションのイージング関数を指定します。
new Accordion(".c-accordion", {
easing: "steps(5)",
duration: 3000,
});Q easing: "steps(5)" を指定しているため、5回に分割されたステップでアニメーションが実行されます。
こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。
<details class="c-accordion">
<summary class="c-accordion_summary">
<span class="c-accordion_icon -question">Q</span>
easing: "steps(5)" を指定しているため、5回に分割されたステップでアニメーションが実行されます。
<span class="c-accordion_switch"><span></span><span></span></span>
</summary>
<div class="c-accordion_contents">
<span class="c-accordion_icon -answer">A</span>
<div class="c-accordion_answer">
<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>