#BlackLivesMatter
AMP
  • websites

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.

Setup

Import the amp-accordion component.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Basic usage

An amp-accordion consists of multiple sections. Each <section> must have two direct children. The first child will be considered as the heading of the section. Clicking/tapping on this section will trigger the expand/collapse behaviour. Use the disable-session-states attribute to disable preserving the accordion state across a session.

Section 1

Bunch of awesome content.

Section 2

Bunch of even more awesome content. This time in a
.

Section 3

Images work as well.
<amp-accordion class="sample">
  <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>
        <div>
      </code>.</div>
  </section>
  <section>
    <h4>Section 3</h4>
    <figure>
      <amp-img src="/static/samples/img/clean-1.jpg"
        layout="responsive"
        width="400"
        height="710"></amp-img>
      <figcaption>Images work as well.</figcaption>
    </figure>
  </section>
</amp-accordion>
Dieses Snippet im Playground öffnen

Custom styling

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

amp-accordion section[expanded] .show-more {
  display: none;
}

amp-accordion section:not([expanded]) .show-less {
  display: none;
}

This example shows a different title based on whether the section is expanded or not.

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.

<amp-accordion class="sample"
  disable-session-states>
  <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>
Dieses Snippet im Playground öffnen

Hidden header

This sample which hides the "Show more" button once it's been clicked.

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.

<amp-accordion class="sample hidden-header"
  disable-session-states>
  <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>
Dieses Snippet im Playground öffnen

Nested accordion

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

Section 1

Bunch of content.

Section 2

Nested Section 2.1

Bunch of content.

Nested Section 2.2

Bunch of more content.

<amp-accordion class="sample"
  disable-session-states>
  <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>
Dieses Snippet im Playground öffnen

Auto-collapsing accordion

The expand-single-section attribute forces the accordion to only allow one expanded section at any given time. Expanding one section will cause any other open sections to close.

Section 1

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.

Section 2

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.

Section 3

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.

<amp-accordion class="sample"
  expand-single-section>
  <section>
    <h4>Section 1</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>
  <section>
    <h4>Section 2</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>
  <section>
    <h4>Section 3</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>
Dieses Snippet im Playground öffnen

Animated accordion

The animate attribute animates the expansion and collapse of accordion sections.

Section 1

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.

Section 2

Section 3

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.

<amp-accordion class="sample"
  animate>
  <section>
    <h4>Section 1</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>
  <section>
    <h4>Section 2</h4>
    <amp-img src="/static/samples/img/clean-1.jpg"
      layout="responsive"
      width="400"
      height="710"></amp-img>
  </section>
  <section>
    <h4>Section 3</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>
Dieses Snippet im Playground öffnen

Comparison accordion

This implements a compare/contrast accordion view using dynamic data.

Here we use css to display components side by side. The display: flex and width: 50% fields allow us to view content side by side. We modify the border and padding in the last class to clearly define the 2 comparison boxes side by side in the accordion.

#content-head {
  display: flex;
}
.fruit-title {
  width: 50%;
}
.comp-data {
  display: flex;
}
.comp-value {
  width: 50%;
  border: 1px solid;
  padding: 5px 18px;
  display: flex;

}
<amp-list src="/static/samples/json/accordion-fruit.json"
  height="170"
  width="auto"
  layout="fixed-height"
  items="."
  single-item
  id="fruitList">
  <template type="amp-mustache">
    <div id="content-head">
      <div class="fruit-title">
        <p>
          {{primaryFruit.subType}} {{primaryFruit.fruit}}
        </p>
        <amp-img src="{{primaryFruit.imageURL}}"
          width="50"
          height="50"></amp-img>
      </div>
      <div class="fruit-title">
        {{#competitorFruit}}
          <p>
            {{subType}} {{fruit}}
          </p>
          <amp-img src="{{imageURL}}"
            width="50"
            height="50"></amp-img>
        {{/competitorFruit}}
      </div>
    </div>
    <section>
      <amp-accordion animate
        disable-session-states
        expand-single-section
        on="expand:fruitList.changeToLayoutContainer;collapse:fruitList.changeToLayoutContainer">
        {{#comparisonData}}{{#heading}}
            <section [class]="'{{headingName}}'.split(' ')[0]">
              <span>{{headingName}}</span>
              <div>
                {{#rowAndSubHeading}}
                  <h3>{{rowLabel}}</h3>
                  <div class="comp-data">
                    {{#fruitData}}
                      <div class="comp-value">
                        {{colData}}
                      </div>
                    {{/fruitData}}
                  </div>
                {{/rowAndSubHeading}}
              </div>
            </section>
          {{/heading}}{{/comparisonData}}
      </amp-accordion>
    </section>
  </template>
</amp-list>
Dieses Snippet im Playground öffnen
Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln
Ein Feature wurde nicht erklärt?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Beispiel auf GitHub bearbeiten