Description

Long and wordy content can be reduced into requestable headlines. This aids in making content shorter, easier to digest, but also promotes interaction with the content.

Functionality

On a desktop, the full email is viewed. On a mobile, the content is hidden, and only the headlines are shown with an icon to expand the content.

Benefits

Scrolling content in email can be tiresome to users, and statistics show that recipients are more likely to move to the next email if the content is too long. Hence the growth of the new online acronym ‘TL;DR’ (Too Long; Didn’t Read). The Accordion avoids this effect.

It works in

Outlook 10/13+	Android (Galaxy S6)	iPhone/iPad	Windows (Nokia Lumia)	Outlook.com	Yahoo! Mail	Gmail

Known issues

Location	Requires fallback?	Fallback
Outlook 10/13+		Shows desktop view.
Android (Galaxy S6)		[Fully supported]
iPhone/iPad		[Fully supported] *iPad currently shows desktop version
Windows (Nokia Lumia)		[Fully supported]
Outlook.com		Shows desktop view
Yahoo! Mail		Shows desktop view
Gmail		Shows desktop view

CSS

Add the following code between the tags, in order to implement the widget.

/* Widget: Accordion, start */	
@media only screen and (max-width: 640px) and (-webkit-max-device-pixel-ratio: 3), only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-max-device-pixel-ratio: 2)  {
	
*[class="hide-desktop"] {display:block !important; width: 20px !important; height:20px !important; max-height: 20px !important; line-height:20px !important; overflow:hidden !important; visibility: visible !important; }
*[class="hide-mobile"] {display: none !important; visibility: hidden !important; }
	
	
#mobile-accordion table {
	width: 100% !important;
	line-height: 100% !important;
	min-width: 100% !important;
}


*[class="gmail-hide"] {
	display: block!important;
	width: auto!important;
	overflow: visible!important;
	float: none !important;
	height: inherit!important;
	max-height: inherit!important;
}
	
table[class="reveal"],  img[class="reveal"],  span[class="reveal"],  td[class="reveal"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: inherit !important;
	line-height: inherit !important;
	overflow: visible!important;
	visibility: visible !important;
}
	
label[class="mobile-label"] {
	background-color: transparent !important;
	cursor: pointer !important;
	display: block !important;
	float: right !important;
	-webkit-tap-highlight-color: transparent !important;
	width: 27px !important;
	position: relative !important;
	z-index: 10 !important;
	mso-hide: none !important;
	height: auto !important;
	max-height: inherit !important;
	line-height: inherit !important;
	overflow: visible!important;
	visibility: visible !important;
}
label[class="mobile-label"] > b {
	background-color: #00a1e4 !important;
	-moz-border-radius: 2px !important;
	-webkit-border-radius: 2px !important;
	border-radius: 2px !important;
	display: block !important;
	height: 3px !important;
	mso-hide: none !important;
	max-height: inherit !important;
	line-height: inherit !important;
	overflow: visible!important;
	visibility: visible !important;
	width: 20px !important;
}
label[class="mobile-label"] > b + b {
	margin-top: 4px !important;
}

div[id="menu-wrapper"] {
	width: 100% !important;
	background-color: #ffffff;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height .35s linear;
	-moz-transition: max-height .35s linear;
	-ms-transition: max-height .35s linear;
	-o-transition: max-height .35s linear;
	transition: max-height .35s linear;
}

input[id="mobile-checkbox-01"]:checked + table div[id="menu-wrapper"], input[id="mobile-checkbox-02"]:checked + table div[id="menu-wrapper"], input[id="mobile-checkbox-03"]:checked + table div[id="menu-wrapper"], input[id="mobile-checkbox-04"]:checked + table div[id="menu-wrapper"] {
	max-height: 650px;
}

input[id="mobile-checkbox-01"]:checked + table label, input[id="mobile-checkbox-02"]:checked + table label, input[id="mobile-checkbox-03"]:checked + table label, input[id="mobile-checkbox-04"]:checked + table label {
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

	}

/* Widget: Accordion, end */

HTML