Building an expandable top stories category list

Let's build out the AMP-HTML first. There will be a section for each of our main categories. The category name will be the header in each section, and we'll then add some top stories as li list items as the content for each section. We can reuse the thumbnail and text layout we developed for the related content examples in the last chapter. The AMP-HTML code will look like this:

<amp-accordion>
  <section>
    <h3>news</h3>
      <ul>
        <li>News story 1 content</li>
        <li>News story 2 content</li>
        ...
      </ul>
  </section>
  <section>
    <h3>sports</h3>
      <ul>
        <li>Sports story 1 content</li>
        <li>Sports story 2 content</li>
        ...
      </ul>
  </section>
  ...
</amp-accordion>

Recall from the last chapter our related content items that included an image and caption. Let's reuse that now. So, each section of the amp-accordion will look something like this:

<section>
  <h3 class="category-title">news</h3>
    <ul>
      <li>
        <figure class="related-thumb">
          <amp-img media = "(min-width: 35.01rem)"
                     src = "img/penguin.jpg" 
                     ...            
          </amp-img>
          ...
          <figcaption>News story 1 content</figcaption>
        </figure>
      </li>
      ...

The markup is too long to show here, but you can see the full code for this example at /ch4/accordion-2.html.