Accordion

単体開閉 · chevron · 飛地グループ一斉開閉

Preview

単体

配送について

ご注文確定後、2〜4 営業日以内に発送します。追跡番号は出荷完了メールに記載されます。

返品・交換

到着から 14 日以内であれば未使用品に限り返品できます。交換は在庫がある場合のみ対応します。

最初を open()

最初を close()

グループ（飛地）

FAQ をすべて開く

FAQ をすべて閉じる

支払い方法は何がありますか？

クレジットカード、銀行振込、コンビニ払いに対応しています。

（間に別コンテンツ — キャンペーン案内など）

キャンペーン規約

こちらは別グループのため、FAQ 一斉開閉の影響を受けません。

領収書は発行できますか？（飛地）

マイページの注文履歴から PDF 領収書をダウンロードできます。

HTML

<tw-accordion>
  <span slot="header">配送について</span>
  <div slot="content">
    <p>ご注文確定後、2〜4 営業日以内に発送します。</p>
  </div>
</tw-accordion>

<div class="ks-row">
  <tw-button type="button" id="…" variant="stroke">最初を open()</tw-button>
  <tw-button type="button" id="…" variant="stroke">最初を close()</tw-button>
</div>

<tw-button type="button" data-tw-accordion-open="faq" variant="stroke">FAQ をすべて開く</tw-button>
<tw-button type="button" data-tw-accordion-close="faq" variant="ghost">FAQ をすべて閉じる</tw-button>

<tw-accordion data-tw-accordion-group="faq">
  <span slot="header">支払い方法は何がありますか？</span>
  <div slot="content">
    <p>クレジットカード、銀行振込、コンビニ払いに対応しています。</p>
  </div>
</tw-accordion>

import "@b4moss/the-wheels";

const first = document.querySelector("tw-accordion");
document.getElementById("open-first")?.addEventListener("click", () => {
  first?.open();
});
document.getElementById("close-first")?.addEventListener("click", () => {
  first?.close();
});

import "@b4moss/the-wheels";
import type { TwAccordion } from "@b4moss/the-wheels";

const first = document.querySelector("tw-accordion") as TwAccordion | null;
document.getElementById("open-first")?.addEventListener("click", () => {
  first?.open();
});
document.getElementById("close-first")?.addEventListener("click", () => {
  first?.close();
});