AMP by Example

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

AMP for Ads (A4A)
AMP for Ads (A4A)

View Source

amp-accordion

Introduction

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.

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Setup

Import the amp-accordion component.

  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Show Hidden Code Hide Code
  <link rel="canonical" href="https://ampbyexample.com/components/amp-accordion/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Use section[expanded] and section:not([expanded]) to style the accordion header depending on whether it is expanded or not.

  <style amp-custom>
  section[expanded] .show-more {
    display: none;
  }
  section:not([expanded]) .show-less {
    display: none;
  }
  .nested-accordion h4 {
    font-size: 14px;
    background-color: #ddd;
  }
</style>
</head>
<body>

Basic Usage

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

  <amp-accordion>
    <section expanded>
      <h4>Section 1</h4>
      <p>Bunch of awesome content.</p>
    </section>
    <section>
      <h4>Section 2</h4>
      <div>Bunch of even more awesome content. This time in a
        <code>&lt;div&gt;</code>.</div>
    </section>
    <section>
      <h4>Section 3</h4>
      <figure>
        <amp-img src="/img/amp.jpg"
            width="1080"
            height="610"
            layout="responsive"
            alt="an image"></amp-img>
        <figcaption>Images work as well.</figcaption>
      </figure>
    </section>
  </amp-accordion>

Section 1

Bunch of awesome content.

Section 2

Bunch of even more awesome content. This time in a <div>.

Section 3

Images work as well.

Styling the Accordion

  <p>Lorem ipsum dolor sit amet, mauris sed, vestibulum velit id, vivamus fermentum sed massa metus semper.</p>

Lorem ipsum dolor sit amet, mauris sed, vestibulum velit id, vivamus fermentum sed massa metus semper.

amp-accordion adds the expanded attribute to any expanded element. You can use CSS attribute selectors to style an accordion section based on whether it's expanded or collapsed. Use section[expanded] to style the expanded state and section:not([expanded]) to style the collapsed state. This example shows a different title based on whether the section is expanded or not.

  <amp-accordion>
    <section>
      <h4>
        <span class="show-more">Show more</span>
        <span class="show-less">Show less</span>
      </h4>
      <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
        in eu wisi. </p>
    </section>
  </amp-accordion>

Show more Show less

Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.


  <p>Lorem ipsum dolor sit amet, mauris sed, vestibulum velit id, vivamus fermentum sed massa metus semper. Id lacus amet.</p>

Lorem ipsum dolor sit amet, mauris sed, vestibulum velit id, vivamus fermentum sed massa metus semper. Id lacus amet.

Here is another example, which hides the "Show more" button once it's been clicked.

  <amp-accordion>
    <section>
      <h4>
        <span class="show-more">Show more</span>
      </h4>
      <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
        in eu wisi. </p>
    </section>
  </amp-accordion>

Show more

Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.

Nested Accordions

You can even nest multiple accordions. Just be sure to avoid styling elements based on the expanded state of the enclosing amp-accordion. In particular, avoid overly generic rules such as:

  section[expanded] h4 {
    ...
  }

instead directly target elements:

  section[expanded] > h4 {
    ...
  }
  <amp-accordion>
    <section>
      <h4>Section 1</h4>
      <p>Bunch of content.</p>
    </section>
    <section>
      <h4>Section 2</h4>
      <amp-accordion class="nested-accordion">
        <section>
          <h4>Nested Section 2.1</h4>
          <p>Bunch of content.</p>
        </section>
        <section>
          <h4>Nested Section 2.2</h4>
          <p>Bunch of more content.</p>
        </section>
      </amp-accordion>
    </section>
  </amp-accordion>

Section 1

Bunch of content.

Section 2

Nested Section 2.1

Bunch of content.

Nested Section 2.2

Bunch of more content.

Next up:

</body>
</html>