|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.|
|Examples||Annotated code example for amp-accordion|
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
amp-accordioncan contain one or more
<section>elements as its direct children.
<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
- 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-accordionelement will be preserved for the session level. To opt out of preserving this state, add the
disable-session-statesattribute to the
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
Set this attribute on the
<amp-accordion> to opt out of preserving the collapsed/expanded state of the accordion.
Set this attribute on a
<section> to display the section as expanded on page load.
- You may use the
amp-accordionelement selector to style it freely.
amp-accordionelements are always
<section>, heading, and content elements cannot be float-able.
- When the section is expanded, the
<section>element has an
- The content element is clear-fixed with
overflow: hiddenand hence cannot have scrollbars.
- Margins of the
<section>, heading, and content elements are set to 0 and can be overridden in custom styles.
- Both the header and content elements are
See amp-accordion rules in the AMP validator specification.