Interactive Sections

Accordion

Our templates currently include one interactive section: an accordion.

Example

Example accordion
MailChimp Note: the accordion is not currently supported by MailChimp, because their system strips out any form tags, and our accordion needs to use <button> tags. Therefore, our MailChimp-integrated templates DO NOT include the Accordion section.

On mobile, it works just like you're used to: clicking an accordion title reveals the content inside it.
The interaction is handled with :hover, just like with the hamburger menu. Therefore, it doesn't close when you click the title again, it doesn't work like a toggle.

In most email clients except iOS Mail, you can touch outside to close it, or touch another title to close the current one and open that instead. For desktop, the accordion items are all opened.

Customisation

You can easily change the looks by changing text, spacing, and backgrounds.

  • Text can be changed with inline CSS
  • Background of the title can be changed with the bgcolor="" attribute value on the accordion-trigger button and inside its table
  • Spacing between accordion items is handled with Universal Dividers
  • Top/bottom spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the <td class="spacer" ...> near the top and bottom of the section
More on Accordions, in the framework documentation.
Next Up: Team →