|Description||An accordion provides a way for viewers to glance at the content outline and jump to any section. This is helpful for handheld mobile devices where even a couple of sentences into a section requires scrolling.|
|Examples||Annotated code example for amp-accordion|
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>s as its direct children.
<section>must contain exactly two direct children.
- The first child (of the section) must be one of
header, and is the heading of the section.
- The second child (of the section) can be any tag allowed in AMP HTML and is 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. The user has the option to opt out of this by adding the
disable-session-statesattribute to the
<amp-accordion> <section expanded> <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> <amp-img src="/awesome.png" width="300" height="300"></amp-img> </section> </amp-accordion>
disable-session-states attribute can be set on
<amp-accordion> to opt out of preserving the collapsed/expanded state of the
expanded attribute can be set on any
<section> that needs to be expanded on page load.
- You may use the
amp-accordionelement selector to style it freely.
amp-accordionelements are always
<section>and the heading and content element are not float-able.
<section>s will have an
expandedattribute when they are expanded.
- The content element is clear-fixed with
overflow: hiddenand hence cannot have scrollbars.
- margins of the
<section>and the 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.