Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

amp-accordion

A stacked list of headers that collapse or expand content sections with user interaction.

Required Scripts

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

Supported Layouts

Provides a way for viewers to glance at the content outline and jump to any section. This is helpful for mobile devices where even a couple of sentences into a section requires scrolling.

Behavior

The amp-accordion component allows you to display collapsible and expandable content sections. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.

  • An amp-accordion accepts one or more <section> elements as its direct children.
  • Each <section> must contain exactly two direct children.
  • The first child in a <section> is the heading for that section of the amp-accordion. It must be a heading element: <h1>-<h6> or <header>.
  • The second child in a <section> is the expandable/collapsable content. It can be any tag allowed in AMP for Email.
  • Clicking/tapping on a <section> heading expands or collapses the section.

Example

The example below contains an amp-accordion with three sections. The expanded attribute on the third section expands it on page load.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<amp-accordion id="my-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

Attributes

animate

Include the animate attribute on <amp-accordion> to add a slight "roll down" animation on expansion, and "roll up" animation on collapse.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<amp-accordion animate>
  <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>
    <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

expanded

Include the expanded attribute on one or more nested <section> to display those section as expanded on page load.

expand-single-section

Include the expand-single-section attribute to enforce one <section> expansion at a time. If the user clicks/taps on an unopened <section>, any currently expanded <section> will collapse.

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

<amp-accordion expand-single-section>
  <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>
    <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

[data-expand]

Bind the [data-expand] attribute on a <section> to expand or collapse the section. An expanded section will collapse if the expression evaluates to false. A collapsed section will expand if the expression evaluates to anything that is not false.

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome content
<amp-accordion>
  <section
    [data-expand]="sectionOne"
    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
  >
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
Open this snippet in playground

Events

The amp-accordion events below trigger on accordion sections when clicked.

Section 1

Opening me will open Section 2

Section 2

Closing me will close Section 1

Section 3

Bunch of awesome content
<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
    <h2>Section 2</h2>
    <div>Closing me will close Section 1</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
Open this snippet in playground

expand

The expand event triggers on the target amp-accordion section that changes from the collapsed state to the expanded state. Calling expand on an already expanded section will not trigger the expand event.

collapse

The collapse event triggers on the target amp-accordion section that changes from the expanded state to the collapsed state. Calling collapse on an already collapsed section will not trigger the event.

Styling

Use the amp-accordion element selector to style an amp-accordion.

amp-accordion {
  background-color: green;
}
  • amp-accordion elements are always display: block.
  • float cannot style the <section>, heading, and content elements.
  • An expanded section applies the expanded attribute to the <section> element.
  • The content element is clear-fixed with overflow: hidden and hence cannot have scrollbars.
  • Margins of the <amp-accordion>, <section>, heading, and content elements are set to 0 and can be overridden in custom styles.
  • Both the header and content elements are position: relative.

Accessibility

amp-accordion automatically adds the following ARIA attributes:

Validation

See amp-accordion rules in the AMP validator specification.

Need more help?

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