Skip to content

Latest commit

 

History

History
64 lines (50 loc) · 2.8 KB

amp-accordion.md

File metadata and controls

64 lines (50 loc) · 2.8 KB

amp-accordion

An accordion provides a way for viewers to have a glance at the outline of the content and jump to a section or their choice at their will. This would be extremely helpful for handheld mobile devices where even a couple of sentences in a section would lead to the viewer needing to scroll.

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 only two direct children.
  • The first child (of the section) will be considered as the heading of the section. Clicking/tapping on this section will trigger the expand/collapse behaviour.
  • The second child (of the section) will be the content or the section
  • There is no restriction on the type of tags that could be used for the <section>’s children.
  • Any additional children of the <section> would be ignored not be displayed. (This should just be a safety backup and should be enforced in the validator)
  • Clicking/tapping on the heading of a section expands/ or collapses the section.
<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

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.