お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

amp-accordion

アコーディオンです。べろべろ~んってリストが出て来る奴です。

プラグインの読み込み

amp-accordionを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<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="images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>

ルールとしては、親要素がamp-accordionなのはともかく
それの直下の子要素は必ずsectionにする必要があります。
で、sectionの子要素の最初は、見出しやらheadreタグを必ず指定します。
これだけしっかり守っていきましょう。

動作デモ

デモ

各種プロパティについて

数は多くないですが、プロパティについてまとめます。

disable-session-states 親要素のamp-accordionタグにつけれるプロパティです。
このプロパティが設定されている場合は
【折りたたみ/展開状態はセッションレベルで保持されず】
設定無い場合は
【折りたたみ/展開状態はセッションレベルで保持される】
となります。
何言ってんだって感じですが、分かりやすく言うと

このプロパティが設定されている場合は
【リロードとか他画面遷移して戻ってきても必ず初期表示となる】
設定無い場合は
【リロードとか他画面遷移して戻ってきても必ず最終表示形式となる(どこか展開してたら展開した状態で表示される)】
って事になります。地味ですがありがたい感じがしますね。
expanded アコーディオン要素をデフォルトで展開状態にします。
ちなみに手動で展開した場合もこのプロパティが付与されます。

ちなみに、JSで作るアコーディオンみたくびろーんと広がる動作はないようです。

装飾/スタイリングについて

装飾に関して以下のルールがあります。

  • amp-accordion要素セレクタを使用して自由にスタイルを設定できます。
  • amp-accordion要素は常にdisplay: blockです。
  • floatは使ったらだめ
  • アコーディオン展開時には、sectionタグにexpandedプロパティが付与されます。
  • アコーディオン内のコンテンツは、高さが固定され、overflow: hiddenが付与されているので、スクロールバーを設定できません。めっちゃ長くすると画面外まで伸びます。
  • マージンはamp-accordionタグsectionタグ、見出し、およびコンテンツ要素で0になってます。ほしければ自分でつけてね。
  • ヘッダ要素とコンテンツ要素に関してはposition: relativeになってます。