Building collapsible content with <amp-accordion>

Collapsible content can help provide a great user experience on mobile devices, where screen space is restricted. An accordion UI component is a list of content sections, each of which can be in an expanded or collapsed state. You've probably seen accordions on the web before and maybe you've designed a web page that uses them. They're widely used on the web, with many different use cases, such as collapsing web page comment sections or for providing an expandable overview of article categories, in a news site, for example. We'll implement this latter use case shortly.

AMP comes with an extended component for building accordions: amp-accordion. Let's see how it works.

First, as usual, you need to include the extended component in the head of your document:

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

Next, we'll add some content sections. AMP uses the HTML5 section tag for this, with the following conditions:

• Each section must be a direct child of amp-accordion
• Each section must have exactly two children:
  • The first child must be a header tag: one of h1, h2, ..., h6, or header
  • The second child can be any valid AMP-HTML tag, that is, an AMP component or an HTML tag, even another amp-accordion:

We'll start with the following code (/ch4/accordion.html):

<amp-accordion>
  <section>
    <h3>Item 1</h3>
    <div>The section content</div>
  </section>
  <section>
    <h3>Item 2</h3>
    <amp-img src="img/penguin.jpg" layout="fixed" width="125"
      height="75"></amp-img>
  </section>
  ...
</amp-accordion>

This should result in an accordion like the one shown in the following image:

So, that seems straightforward. Out of the box, we get a simple, functional accordion, but it's going to need some styling before we can show it to the world.

First, let's develop the content a bit more. So far, we've worked on an article page for a website. Let's say we wanted to show a list of categories with some top stories in each category. We can build this list and make each section expandable with amp-accordion.