Skip to content

Latest commit

 

History

History
94 lines (75 loc) · 3.87 KB

amp-accordion.md

File metadata and controls

94 lines (75 loc) · 3.87 KB
Raw

amp-accordion

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.
Availability Stable
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

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>s as its direct children.
  • Each <section> must contain exactly two direct children.
  • The first child (of the section) must be one of h1, h2, ..., h6, 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-accordion element will be preserved for the session level. The user has the option to opt out of this by adding the disable-session-states attribute to the amp-accordion tag.

Example:

<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>

Attributes

disable-session-states

The disable-session-states attribute can be set on <amp-accordion> to opt out of preserving the collapsed/expanded state of the amp-accordion element.

expanded

The expanded attribute can be set on any <section> that needs to be expanded on page load.

Styling

  • You may use the amp-accordion element selector to style it freely.
  • amp-accordion elements are always display: block.
  • <section> and the heading and content element are not float-able.
  • <section>s will have an expanded attribute when they are expanded.
  • The content element is clear-fixed with overflow: hidden and hence cannot have scrollbars.
  • margins of the amp-accordion, <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 position: relative.

Validation

See amp-accordion rules in the AMP validator specification.