Interactive Sections

Interactive Sections

Accordion

Our templates currently include only one interactive section: an accordion.

Example

Example accordion

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 inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td> at the near top and near bottom of the section
More on Accordions, in the framework documentation.