AMP

Important: this component does not support your currently selected format stories!

amp-accordion

閲覧者がコンテンツの概要を一目で把握し、選択した任意のセクションにジャンプできるようにします。この機能は、セクション内の数行の文章でもスクロールが必要なモバイル デバイスの場合に役立ちます。

必須のスクリプト <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
サポートされるレイアウト container
amp-accordion のアノテーション付きコードの例

動作

amp-accordion コンポーネントを使用すると、折りたたみと展開が可能なコンテンツ セクションを表示できます。amp-accordion コンポーネントの直接の子は、それぞれアコーディオン内の 1 つのセクションと見なされます。各ノードは、<section> タグにする必要があります。

  • amp-accordion は、直接の子として 1 つまたは複数の <section> 要素を格納することができます。
  • <section> は、直接の子を 2 つ格納している必要があります。
  • セクションの 1 番目の子は、セクションの見出しを示し、見出し要素である必要があります(h1h2、 ... 、h6header のいずれか)。
  • セクションの 2 番目の子は、AMP HTML 内で許可されている任意のタグを指定することが可能で、セクションの内容を示します。
  • セクションの見出しをクリック / タップすると、セクションの展開や折りたたみが行われます。
  • amp-accordion 要素内の各セクションの折りたたみ状態 / 展開状態は、セッション レベルで保持されます。状態を保持しないようにするには、amp-accordion 要素に disable-session-states 属性を追加します。

例: アコーディオンを表示する

この例では、3 つのセクションを表示します。3 番目のセクションはページの読み込み時に展開されます。また、disable-session-states を設定して、折りたたみ状態や展開状態を保持しないようにします。

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
Open this snippet in playground

amp-accordion の他のデモについては、AMP By Example をご覧ください。

イベント

accordionsection で、以下のイベントがトリガーされます。

expand このイベントは、折りたたみ状態から展開状態に変化するターゲット section 上でトリガーされます。すでに展開済みの sectionexpand を呼び出しても、このイベントはトリガーされません。
collapse このイベントは、展開状態から折りたたみ状態に変化するターゲット section 上でトリガーされます。すでに折りたたみ済みの sectioncollapse を呼び出しても、このイベントはトリガーされません。

アクション

expand このイベントは、折りたたみ状態から展開状態に変化するターゲット section 上でトリガーされます。すでに展開済みの sectionexpand を呼び出しても、このイベントはトリガーされません。
toggle このアクションは、amp-accordionexpanded 状態と collapsed 状態を切り替えます。引数なしで呼び出した場合、アコーディオンのすべてのセクションの状態を切り替えます。section 引数と、対応する id を値として指定すると、単一のセクションを指定できます。
expand このアクションは、amp-accordion を展開します。すでに expanded になっている場合は、その状態が維持されます。引数なしで呼び出した場合、アコーディオンのすべてのセクションを展開します。section 引数と、対応する id を値として指定すると、単一のセクションを指定できます。
collapse このアクションは、amp-accordion を折りたたみます。すでに折りたたみ状態になっている場合は、その状態が維持されます。引数なしで呼び出した場合、アコーディオンのすべてのセクションを折りたたみます。section 引数と、対応する id を値として指定すると、単一のセクションを指定できます。

属性

animate <amp-accordion> に対してこの属性を設定すると、すべてのアコーディオン セクションの展開 / 折りたたみ動作がアニメーション化されます。
disable-session-states <amp-accordion> に対してこの属性を設定すると、アコーディオンの折りたたみ / 展開状態が保持されなくなります。
expanded <section> に対してこの属性を設定すると、そのセクションはページの読み込み時に展開状態で表示されます。
expand-single-section <amp-accordion> に対してこの属性を設定すると、一度に 1 つの <section> だけが展開できるようになります。ユーザーが 1 つの <section> にフォーカスすると、以前に展開されていた他の <section> は折りたたまれます。

スタイル設定

  • amp-accordion 要素セレクタを使用して、自由にスタイルを設定できます。
  • amp-accordion 要素は常に display: block です。
  • <section> 要素、heading 要素、content 要素は、フローティングできません。
  • セクションが展開されている場合、<section> 要素は expanded 属性を持ちます。
  • content 要素は、overflow: hidden によって clearfix されているため、スクロールバーを持つことはできません。
  • <amp-accordion> 要素、<section> 要素、heading 要素、content 要素のマージンは 0 に設定され、カスタム スタイルでオーバーライドできます。
  • header 要素と content 要素はどちらも position: relative です。

検証

AMP 検証ツール仕様の amp-accordion ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub