amp-accordion
Description
A stacked list of headers that collapse or expand content sections with user interaction.
Required Scripts
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">
Supported Layouts
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.
Usage
The amp-accordion
component allows you to display collapsible and expandable
content sections. This component provides a way for viewers to glance at the
content outline and jump to any section. Effective use reduces scrolling needs
on mobile devices.
- An
amp-accordion
accepts one or more<section>
elements as its direct children. - Each
<section>
must contain exactly two direct children. - The first child in a
<section>
is the heading for that section of theamp-accordion
. It must be a heading element such as<h1>-<h6>
or<header>
. - The second child in a
<section>
is the expandable/collapsible content. It can be any tag allowed in AMP HTML. - A click or tap on a
<section>
heading expands or collapses the section. - An
amp-accordion
with a definedid
preserves the collapsed or expanded state of each section while the user remains on your domain.
Example
The example below contains an amp-accordion
with three sections. The
expanded
attribute on the third section expands it on page load.
<amp-accordion id="my-accordion" disable-session-states> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section expanded> <h2>Section 3</h2> <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256"></amp-img> </section> </amp-accordion>
Standalone use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of amp-accordion
, see bento-accordion
.
Attributes
animate
Include the animate
attribute in <amp-accordion>
to add a "roll down"
animation when the content is expanded and "roll up" animation when collapsed.
This attribute can be configured to based on a media query.
<amp-accordion animate> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section> <h2>Section 3</h2> <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" ></amp-img> </section> </amp-accordion>
expanded
Apply the expanded
attribute to a nested <section>
to expand that section when the page loads.
Use amp-bind
to bind the [expanded]
attribute to programmatically expand or collapse a <section>
element. An expanded section collapses when the expression evaluates as false
. A collapsed section expands if the expression evaluates to anything other than false
.
<amp-accordion> <section [expanded]="sectionOne" on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})" > <h2>Section 1</h2> <p>Bunch of awesome content</p> </section> <section> <h2>Section 2</h2> <div>Bunch of awesome content</div> </section> <section expanded> <h2>Section 3</h2> <div>Bunch of awesome content</div> </section> </amp-accordion> <button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button> <button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
expand-single-section
Allow only one section to expand at a time by applying the expand-single-section
attribute to the <amp-accordion>
element. This means if a user taps on a collapsed <section>
, it will expand and collapse other expanded <section>
's.
<amp-accordion expand-single-section> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section> <h2>Section 3</h2> <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" ></amp-img> </section> </amp-accordion>
Styling
The amp-accordion
element selector styles an amp-accordion
according to your
specifications. The following example changes the background color to green:
amp-accordion { background-color: green; }
Keep the following points in mind when you style an amp-accordion:
amp-accordion
elements are alwaysdisplay: block
.float
cannot style a<section>
, heading, nor content elements.- An expanded section applies the
expanded
attribute to the<section>
element. - 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 to0
, but can be overridden in custom styles. - Both the header and content elements are
position: relative
.
Accessibility
amp-accordion
automatically adds the following ARIA attributes:
aria-controls
: Applied to the header element of eachamp-accordion
section.aria-expanded (state)
: Applied to the header element of eachamp-accordion
section.aria-labelledby
: Applied to the content element of eachamp-accordion
section.
amp-accordion
also automatically adds the following accessibility attributes:
tabindex
: Applied to the header element of eachamp-accordion
section.role=button
: Applied to the header element of eachamp-accordion
section.role=region
: Applied to the content element of eachamp-accordion
section.
Version notes
The experimental 1.0
version of amp-accordion
does not support session states. It behaves as if the disable-session-states
attribute is always applied.
Version 0.1
and 1.0
are compatible with amp-bind
, but some binding syntax is different. You may bind directly with the expanded
attribute in version 1.0
. The data-expand
binding is not supported in version 1.0
. See the expanded
attribute for further information.
이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.
Stack Overflow로 이동 버그나 누락된 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기