收合區域 - amp-accordion

如下圖所示：

如手風琴（accordion）一般，開合以顯示內容

Required Script

<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> 中可以包含1個以上的 <section>
• 每一個 <section> 會包含2部分
  • 第一部分是該區域的 header （ Header 元件），可以是 <h1> , <h2> , ... , <h6> , <header>
  • 第二部分則是該區域的主要內容（ Content 元件），可為任意的 tag

Events & Actions

| Event | Action | Description
:------------ | :------------ | :------------ | :------------
expand | Y | Y | 展開以顯示該區域
collapse | Y | Y | 收縮以隱藏該區域
trigger | N | Y | 切換 expand & trigger 的狀態

Attributes

Styling

• <amp-accordion> 永遠是 display: block

• <section> , 以及它裡面的2大區域元件，不可以是 float-able

• 當 <section> 被展開時，它會擁有 expanded 這個 attribute

• Content 元件是 overflow: hidden 故而不會有捲軸

• <amp-accordion> , <section> , Header , Content 這些元件的 margin 設定都是 0 ，但都可覆寫成客製的 styles

• Header 與 Content 這2元件都是 position: relative

參考來源：

• 官方網站
• ampbyexample - amp-accordion