How to Use the AMP Accordion Block

1 What is the Accordion Block?

The AMP Accordion block creates expandable/collapsible sections within your email. Recipients click a section title to reveal or hide its content — a familiar UI pattern for FAQs, product details, shipping info, and terms.

Built on AMP's <amp-accordion> component, it works in Gmail, Yahoo Mail, Mail.ru, FairEmail, and AOL. Non-AMP clients see a static fallback with all sections expanded.

Use cases:

• FAQ sections — questions as titles, answers hidden until clicked
• Product specs — dimensions, materials, care instructions in collapsible sections
• Event agendas — day-by-day schedule with expandable session details
• Shipping & returns — policies tucked away but accessible
• Multi-topic newsletters — let readers expand only the topics they care about

2 Adding Sections

Drag the AMP Accordion block from the AMP section of the block palette into a container. It starts with one section.

Section Structure

Each section has two parts:

• Title — the clickable header that toggles visibility (e.g., "What is your return policy?")
• Content container — a full container (same as a regular column container) that holds any blocks: text, images, buttons, spacers, etc.

Add sections with the "+" button. Each section gets a unique ID and can be independently expanded or collapsed.

Accordion Behavior

• Auto-collapsing (default: on) — opening one section automatically closes others. Only one section is visible at a time.
• Animate (default: on) — smooth expand/collapse transitions
• Gap between sections — vertical spacing between section blocks (default: 0px)
• Initial state — each section can start expanded or collapsed

3 Section Content

Each accordion section's content area is a real container — the same container type used in the stripe hierarchy. This means you can add any block inside a section:

• Text blocks with formatted content
• Images and image galleries
• Buttons and CTAs
• Spacers and dividers
• Even nested AMP blocks (though nesting should be used sparingly)

4 Styling the Accordion

Title Styles

• Font — family (default: Arial), size (default: 20px), color (default: #333333)
• Bold / Italic toggles
• Alignment — left, center, or right
• Background color — default #f6f6f6 (light gray)
• Border — width, color (#dfdfdf), style (solid), and mode (all sides or individual)
• Icon — toggle a chevron indicator (▾) that rotates when sections expand/collapse

Visibility

• Include In — both (default), AMP only, or HTML only
• Hide on Desktop / Mobile

5 How It Exports

MiN8T generates dual output:

AMP Version

<amp-accordion animate expand-single-section>
  <section expanded>
    <h3 style="background: #f6f6f6; padding: 12px 16px;">
      What is your return policy?
    </h3>
    <div style="padding: 16px;">
      You can return items within 30 days...
    </div>
  </section>
  <section>
    <h3 style="background: #f6f6f6; padding: 12px 16px;">
      How long does shipping take?
    </h3>
    <div style="padding: 16px;">
      Standard shipping takes 3-5 business days...
    </div>
  </section>
</amp-accordion>

HTML Fallback

For non-AMP clients, all sections render fully expanded with visible titles and content. The amp-accordion-0.1.js script is automatically injected into the AMP document head.

6 Next Steps

• How to Use the AMP Carousel Block — add interactive image galleries
• How to Add a Feedback Form — collect responses within email
• How to Test and Export AMP Emails — test your accordion in Gmail

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.