AMP

Important: this documentation is not applicable to your currently selected format stories!

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.

Usage

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.

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

disable-session-states

Include the disable-session-states attribute on <amp-accordion> to disable collapsed/expanded state preservation.

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

Actions

toggle

The toggle action switches the expanded and collapsed states of the amp-accordion sections. When called with no arguments, it will toggle all sections of the accordion. Specify a specific section by adding the section argument and the corresponding id as the value.

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome content
<amp-accordion id="myAccordion">
  <section id="section1">
    <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:myAccordion.toggle">Toggle All Sections</button>
<button on="tap:myAccordion.toggle(section='section1')">
  Toggle Section 1
</button>
Open this snippet in playground

expand

The expand action expands the sections of the amp-accordion. If a section is already expanded, it will stay expanded. When called with no arguments, it will expand all sections of the accordion. Specify a section by adding the section argument and the corresponding id as the value.

<button on="tap:myAccordion.expand">Expand All Sections</button>
<button on="tap:myAccordion.expand(section='section1')">
  Expand Section 1
</button>

collapse

The collapse action collapses the sections of the amp-accordion. If a section is already collapsed, it will stay collapsed. When called with no argument, it will collapse all section of the accordion. Specify a section by adding the section argument and the corresponding id as the value.

<button on="tap:myAccordion.collapse">Collapse All Sections</button>
<button on="tap:myAccordion.collapse(section='section1')">
  Collapse Section 1
</button>

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