AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-accordion

 
You can now use this component outside valid AMP documents using the experimental Bento version of this component. Learn more in our Bento guide.

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-0.1.js"></script>

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>
Mở đoạn mã này trong sân thực hành

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>
Mở đoạn mã này trong sân thực hành

expanded

Apply the expanded attribute to a nested <section> to expand that section when the page loads.

expand-single-section

Apply the expand-single-section attribute to amp-accordion to specify that only one <section> can expand at a time. If the user clicks or taps on a collapsed <section>, any currently expanded <section> collapses.

<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>
Mở đoạn mã này trong sân thực hành

[data-expand]

Bind the [data-expand] attribute to a <section> to expand or collapse that section. An expanded section collapses if the expression evaluates as false. A collapsed section expands if the expression evaluates as anything other than false.

<amp-accordion>
  <section
    [data-expand]="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>
    <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>
Mở đoạn mã này trong sân thực hành

Events

The following amp-accordion events trigger on accordion sections when they're clicked or tapped.

expand

The expand event triggers the targeted amp-accordion section to change from the collapsed state to the expanded state. Call expand on an already expanded section to trigger the expand event.

<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
Mở đoạn mã này trong sân thực hành

collapse

The collapse event triggers the targeted amp-accordion section to change from the expanded state to the collapsed state. Call collapse on an already collapsed section to trigger the event.

<amp-accordion id="myAccordion">
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
    <h2>Section 2</h2>
    <div>Closing me will close Section 1</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
Mở đoạn mã này trong sân thực hành

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 always display: 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 to 0, 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 each amp-accordion section.
  • aria-expanded (state): Applied to the header element of each amp-accordion section.
  • aria-labelledby: Applied to the content element of each amp-accordion section.

amp-accordion also automatically adds the following accessibility attributes:

  • tabindex: Applied to the header element of each amp-accordion section.
  • role=button: Applied to the header element of each amp-accordion section.
  • role=region: Applied to the content element of each amp-accordion section.

Validation

See amp-accordion rules in the AMP validator specification.

Bạn cần được trợ giúp thêm?

Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.

Truy cập Stack Overflow
Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Truy cập GitHub