amp-accordion

1.0 0.1

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

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

動作

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

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

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

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

<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>

イベント

accordion の 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 ルールをご覧ください。