<? esc($page_title);?>

When I was reviewing lead flows at a FinTech startup launching its first lead nurturing campaigns, I noticed a lot of long-form content — and knew immediately there was work to be done. One email in particular was a Q&A aimed at clarifying financial terms to an audience with varying levels of financial literacy. It was daunting. Implementing a simple accordion increased engagement metrics by almost 200% as users interacted with each section, and drove 27% more traffic to the website.

What is an Accordion

An accordion is a UI (user interface) pattern where multiple sections of content are stacked vertically. Each section has a header (or "title"), and clicking the header reveals the hidden content below. In AMP for Email, the accordion behaves exactly the same — but it uses the <amp-accordion> element instead of JavaScript.

AMP for Email lets you create dynamic, interactive content inside emails using AMP components instead of JavaScript.

Accordions keep emails cleaner by letting users expand only the content they are interested in.

Yes! AMP accordions are responsive by default, making them great for both desktop and mobile readers.

Why Use an Accordion in AMP Email?

Here are a few practical reasons to use accordions inside an email:

Better Organization: Collapse long sections into neatly titled panels.
Cleaner UX: Readers can quickly jump to the sections they care about.
Mobile-Friendly: AMP accordions are responsive by default.
Interactivity: Makes your email feel more dynamic without heavy code.

Use Case	Example
FAQs	Expand answers only when needed
Product Details	Show more product features/specs
Course Descriptions	Show more product features/specs
Promotions	Hide/show terms and conditions

How AMP Accordions Work

The AMP team provides a specific element: <amp-accordion>

Inside the <amp-accordion>, each expandable section is wrapped in a <section>. Each <section> must contain a heading tag (<h1> through <h6>) and a container for the expandable content (like a <div> or <p>).

✅ AMP will automatically handle the expand/collapse behavior.
✅ No extra JavaScript, CSS, or accessibility code is needed.

Step-by-Step Example: Simple AMP Accordion

1. Include the required AMP component

In your email's <head>, you must include the amp-accordion script:

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

2. Basic Accordion Markup

Here is a fully working AMP accordion you can plug into the <body> of your email.

									
<amp-accordion> <!-- this is the required AMP element -->
  <section>
    <h4>Question 1: What is AMP for Email?</h4>
    <p>AMP for Email lets you create dynamic, interactive content inside emails using AMP components instead of JavaScript.</p>
  </section>
  <section>
    <h4>Question 2: Why should I use an accordion?</h4>
    <p>Accordions keep emails cleaner by letting users expand only the content they are interested in.</p>
  </section>
  <section>
    <h4>Question 3: Is this mobile responsive?</h4>
    <p>Yes! AMP accordions are responsive by default, making them great for both desktop and mobile readers.</p>
  </section>
</amp-accordion>

Key Notes to Remember

Structure: Each <section> must have a heading (<h1> to <h6>) and a content container (<div>, <p>, etc.).
Default Open: If you want a section open by default, you can add the expanded attribute:

									
<amp-accordion expanded>
  <section>
    <h4>Question 1: What is AMP for Email?</h4>
    <p>AMP for Email lets you create dynamic, interactive content inside emails using AMP components instead of JavaScript.</p>
  </section>
</amp-accordion>

Accessibility: AMP automatically makes accordions accessible (keyboard and screen reader friendly).
Nesting: You can nest accordions inside each other!
Styling: You can style the headings and paragraphs normally with CSS, but can't override accordion functionality.

Download the comprehensive accordion template and test it out in the AMP playground!

Next Topics

How to Create a Carousel in AMP for Email
Create a real working loan calculator

How to Build an Accordion in AMP for Email