Make room in your emails with a familiar component

Accordions in Pine 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 Pine'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 Pine 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 such as <button>, so remember to always test.