AMP

amp-accordion

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.

Required Script<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Supported Layoutscontainer
ExamplesAnnotated code example for amp-accordion

Behavior

The amp-accordion component allows you to display collapsible and expandable content sections. Each of the amp-accordion component’s immediate children is considered a section in the accordion. Each of these nodes must be a <section> tag.

  • An amp-accordion can contain one or more <section> elements as its direct children.
  • Each <section> must contain exactly two direct children.
  • The first child (of the section) represents the heading for the section and must be a heading element (one of h1, h2, ..., h6, header).
  • The second child (of the section) can be any tag allowed in AMP HTML and represents the content of the section.
  • Clicking/tapping on the heading of a section expands or collapses the section.
  • The collapsed/expanded state of each section in the amp-accordion element will be preserved for the session level. To opt out of preserving this state, add the disable-session-states attribute to the amp-accordion element.

Example: Displaying an accordion

In this example, we display three sections, where the third section is expanded on page load. Also, we opted out of preserving the collapsed/expanded state by setting disable-session-states.

Show full code

To see more demos of the amp-accordion, visit AMP By Example.

Events

The events below will be triggered on sections of accordion.

`expand`This event is triggered on the target `section` that changes from collapsed state to expanded state. Notice that calling `expand` on an already expanded `section` would not trigger this event.
`collapse`This event is triggered on the target `section` that changes from expanded state to collapsed state. Notice that calling `collapse` on an already collapsed `section` would not trigger this event.

Actions

expandThis event is triggered on the target section that changes from collapsed state to expanded state. Notice that calling expand on an already expanded section would not trigger this event.
toggleThis action toggles between the expanded and collapsed states of the amp-accordion. When called with no arguments, it will toggle all sections of the accordion. A single section may be specified with the section argument and the corresponding id as the value.
expandThis action expands an amp-accordion. If it is already expanded, it will stay so. When called with no arguments, it will expand all sections of the accordion. A single section may be specified with the section argument and the corresponding id as the value.
collapseThis action collapses an amp-accordion. If it is already collapsed, it will stay so. When called with no arguments, it will collapse all sections of the accordion. A single section may be specified with the section argument and the corresponding id as the value.

Attributes

animateSet this attribute on the <amp-accordion> to animate the expansion / collapse of all accordion sections.
disable-session-statesSet this attribute on the <amp-accordion> to opt out of preserving the collapsed/expanded state of the accordion.
expandedSet this attribute on a <section> to display the section as expanded on page load.
expand-single-sectionSet this attribute on the <amp-accordion> to only allow one <section> to be expanded at a time. If the user focuses on one <section> any other previously expanded <section> will be collapsed.

Styling

  • You may use the amp-accordion element selector to style it freely.
  • amp-accordion elements are always display: block.
  • The <section>, heading, and content elements cannot be float-able.
  • When the section is expanded, the <section> element has an expanded attribute.
  • 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.

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