Description 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 Layouts container
Examples Annotated 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

Actions

toggle

This action toggles between the expanded and collapsed states of the amp-accordion. When called with no arguements, it will toggle all sections of the accordion. A single section may be specified with the section arguement and the corresponding id as the value.

expand

This action expands an amp-accordion. If it is already expanded, it will stay so. When called with no arguements, it will expand all sections of the accordion. A single section may be spefified with the section arguement and the corresponding id as the value.

collapse

This action collapses an amp-accordion. If it is already collapsed, it will stay so. When called with no arguements, it will collapse all sections of the accordion. A single section may be spefified with the section arguement and the corresponding id as the value.

Attributes

disable-session-states

Set this attribute on the <amp-accordion> to opt out of preserving the collapsed/expanded state of the accordion.

expanded

Set this attribute on a <section> to display the section as expanded on page load.

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.