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

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.