Make room in your emails with a familiar component

Accordions in Acorn are meant for mobile devices, and they work similar to their website counterparts. For desktop and web email clients, the accordion content will be visible.

Shared Styles

Accordions need some CSS for mobile, which is included in Acorn's boilerplate. This CSS is shared with hamburger menus, so if you don't use accordions and hamburger menus at all in your email you can safely delete the following associated styles:

.toggle-content {
  max-height: 0;
  overflow: auto;
  transition: max-height .4s linear;
  -webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover + .toggle-content,
.toggle-content:hover {max-height: 999px!important;}

Compatibility

Accordions in Acorn use a <button> tags and CSS :hover combination, to provide decent client support while not having you worry about unique checkbox IDs and repeated styles.

However, do note that only a few email clients support :hover. In addition to that, some email service providers, like MailChimp, do not allow form elements (which is what buttons are), so remember to always test.