← 一覧へ

accordion

クリックでコンテンツの開閉を行うアコーディオンコンポーネント。trigger 内に .js-accordion-toggleOpen クラス付きの要素を置くと、開閉に応じてその要素すべてに is-open クラスが付け外しされる。

Props

Prop Type Default Description
onlyPC boolean false PCでのみ開閉可能にする。SP幅では常に開いた状態で表示され、クリックできなくなる
onlySP boolean false SPでのみ開閉可能にする。PC幅では常に開いた状態で表示され、クリックできなくなる
initialHeight number 0 閉じた状態のPCでの最小の高さ（rem）。0以外を指定すると閉じていてもコンテンツの一部が見える
initialHeightSP number 0 閉じた状態のSPでの最小の高さ（rem）
openTxt string - 開いた状態のときに .js-accordion-trigger-txt 要素へ表示するテキスト。閉じると元のテキストに戻る
slideSpeed number 200 スライドのスピードを変更することができます。（ミリ秒）

デフォルト

トリガーをクリックするとコンテンツが開閉する。js-accordion-toggleOpenを付与した要素に対して

アコーディオンのコンテンツがここに入ります。アコーディオンのコンテンツがここに入ります。アコーディオンのコンテンツがここに入ります。

コードを見る 
<CAccordion>
  <div slot="trigger">
    <span>トリガーのテキスト</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // コンテンツ
  </div>
</CAccordion>

onlyPC / onlySP — 表示デバイスを限定する

onlyPC を付けると、SP幅（768px未満）では常に開いた状態で表示されクリックできなくなる（onlySP はその逆でPCで常に開いた状態になる）。

SP幅ではクリックできず、常にこのコンテンツが表示された状態になります。

PC幅ではクリックできず、常にこのコンテンツが表示された状態になります。

コードを見る 
<CAccordion onlyPC>
  <div slot="trigger">
    <span>PCのみ開閉可能</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // コンテンツ
  </div>
</CAccordion>
<CAccordion onlySP>
  <div slot="trigger">
    <span>SPのみ開閉可能</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // コンテンツ
  </div>
</CAccordion>

initialHeight / initialHeightSP — 閉じた状態でも一部を見せる

閉じている状態でも、指定した高さ（rem）分だけコンテンツを表示したままにする。

このアコーディオンは initialHeight / initialHeightSP が指定されているため、閉じた状態でも先頭の数行が見えています。トリガーをクリックすると全文が表示され、再度クリックすると指定した高さまで戻ります。長い商品説明や利用規約など、全文を表示する前にプレビューを見せたい場合に便利なパターンです。

コードを見る 
<CAccordion initialHeight={6} initialHeightSP={4}>
  <div slot="trigger">
    <span>続きを読む</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // 長いコンテンツ
  </div>
</CAccordion>

openTxt — トリガーのテキストを開閉で切り替える

openTxt を指定すると、開いたときに trigger 内の .js-accordion-trigger-txt 要素のテキストが openTxt の値に置き換わり、閉じると元のテキストに戻る。

トリガーのテキストが「開く」から「閉じる」に切り替わります。

コードを見る 
<CAccordion openTxt="閉じる">
  <div slot="trigger">
    <span class="js-accordion-trigger-txt">開く</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // コンテンツ
  </div>
</CAccordion>

slideSpeed — 開閉のスピードを変更する

slideSpeed（ミリ秒）を指定すると、開閉時のスライドアニメーションの速度を変更できる。未指定の場合は200msになる。

このアコーディオンは slideSpeed に 1000 を指定しているため、開閉のスライドアニメーションがゆっくり動きます。

コードを見る 
<CAccordion slideSpeed={1000}>
  <div slot="trigger">
    <span>トリガーのテキスト</span>
    <span class="js-accordion-toggleOpen">トリガーのアイコン</span>
  </div>
  <div slot="contents">
    // コンテンツ
  </div>
</CAccordion>