Important: this documentation is not applicable to your currently selected format stories!
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.
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 AMP 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.
Example
The example below demonstrates amp-accordion
component in standalone use.
<head> <script async src="https://cdn.ampproject.org/v0.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css"> <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script> </head> <amp-accordion id="myAccordion" animate='true'> <section id="section1"> <h2>Section 1</h2> <div>Puppies are cute.</div> </section> <section id="section2"> <h2>Section 2</h2> <div>Kittens are furry.</div> </section> <section id="section3"> <h2>Section 3</h2> <div>Elephants have great memory.</div> </section> </amp-accordion> <div class="buttons" style="margin-top: 8px;"> <button id='button1'>Toggle All Sections</button> <button id='button2'>Expand Section 2</button> <button id='button3'>Collapse Section 3</button> </div> <script> (async () => { const accordion = document.querySelector('#myAccordion'); await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi(); // programatically toggle (expands) all sections api.toggle(); // set up button actions document.querySelector('#button1').onclick = () => api.toggle(); document.querySelector('#button2').onclick = () => api.expand('section2'); document.querySelector('#button3').onclick = () => api.collapse('section3'); })(); </script>
Interactivity and API usage
Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and Events and amp-bind
.
The amp-accordion
component API is accessible by including the following script tag in your document:
await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi();
Actions
toggle()
The toggle
action switches the expanded
and collapsed
states of
amp-accordion
sections. When called with no arguments, it toggles all sections
of the accordion. To specify a specific section, add the section
argument and
use its corresponding id
as the value.
<amp-accordion id="myAccordion"> <section id="section1"> <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> <div>Bunch of awesome content</div> </section> </amp-accordion> <button id="button1">Toggle All Sections</button> <button id="button2">Toggle Section 1</button> <script> (async () => { const accordion = document.querySelector('#myAccordion'); await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi(); // set up button actions document.querySelector('#button1').onclick = () => api.toggle(); document.querySelector('#button2').onclick = () => api.toggle('section1'); })(); </script>
expand()
The expand
action expands the sections of the amp-accordion
. If a section
is already expanded, it stays expanded. When called with no arguments, it
expands all sections of the accordion. To specify a section, add the section
argument, and use its corresponding id
as the value.
<button id="button1">Expand All Sections</button> <button id="button2">Expand Section 1</button> <script> (async () => { const accordion = document.querySelector('#myAccordion'); await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi(); // set up button actions document.querySelector('#button1').onclick = () => api.expand(); document.querySelector('#button2').onclick = () => api.expand('section1'); })(); </script>
collapse()
The collapse
action collapses the sections of the amp-accordion
. If a
section is already collapsed, it stays collapsed. When called with no arguments,
it collapses all sections of the accordion. To specify a section, add the
section
argument, and use its corresponding id
as the value.
<button id="button1">Collapse All Sections</button> <button id="button2">Collapse Section 1</button> <script> (async () => { const accordion = document.querySelector('#myAccordion'); await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi(); // set up button actions document.querySelector('#button1').onclick = () => api.collapse(); document.querySelector('#button2').onclick = () => api.collapse('section1'); })(); </script>
Events
The amp-accordion
API allows you to register and respond to the following events:
expand This event is triggered when an accordion section is expanded and is dispatched from the expanded section.
collapse This event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.
In the example below, section 1
listens for the expand
event and expands section 2
when it is expanded. section 2
listens for the collapse
event and collapses section 1
when it is collapsed.
<amp-accordion id="eventsAccordion" animate='true'> <section id="section1"> <h2>Section 1</h2> <div>Puppies are cute.</div> </section> <section id="section2"> <h2>Section 2</h2> <div>Kittens are furry.</div> </section> </amp-accordion> <script> (async () => { const accordion = document.querySelector('#eventsAccordion'); await customElements.whenDefined('amp-accordion'); const api = await accordion.getApi(); // when section 1 expands, section 2 also expands // when section 2 collapses, section 1 also collapses const section1 = document.querySelector('#section1'); const section2 = document.querySelector('#section2'); section1.addEventListener('expand', () => api.expand('section2')); section2.addEventListener('collapse', () => api.collapse('section1')); })(); </script>
Layout and style
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">
Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
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.
<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-expanded]
is not supported in version 1.0
. See the expanded
attribute below for further information.
Znasz już ten dokument na wylot i nadal nie znajdujesz w nim odpowiedzi na wszystkie pytania? Być może inni przeszli to samo: skontaktuj się z nimi na Stack Overflow.
Przejdź do Stack Overflow Udało Ci się trafić na błąd albo brakuje jakiejś funkcji?Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.
Przejdź do GitHub