mjml-0.1.0.0: test/fixtures/mj-accordion.html
<!doctype html>
<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
noinput.mj-accordion-checkbox { display:block!important; }
@media yahoo, only screen and (min-width:0) {
.mj-accordion-element { display:block; }
.mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }
.mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }
.mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }
.mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }
.mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }
.mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }
}
.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }
.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }
.moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }
@goodbye { @gmail }
</style>
</head>
<body style="word-spacing:normal;">
<div
aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"
>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:2px solid black;border-bottom:none;font-family:Ubuntu, Helvetica, Arial, sans-serif;"
>
<tbody>
<tr
>
<td style="padding:0px;">
<label
class="mj-accordion-element" style="font-size:13px;"
>
<!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->
<div>
<div class="mj-accordion-title">
<table
cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"
>
<tbody>
<tr>
<td
style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"
>
Why use an accordion?
</td>
<!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->
</tr>
</tbody>
</table>
</div>
<div
class="mj-accordion-content"
>
<table
cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"
>
<tbody>
<tr>
<td
style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"
>
<span>
Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</label>
</td>
</tr>
<tr
>
<td style="padding:0px;">
<label
class="mj-accordion-element" style="font-size:13px;"
>
<!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->
<div>
<div class="mj-accordion-title">
<table
cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"
>
<tbody>
<tr>
<td
style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"
>
How it works
</td>
<!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->
</tr>
</tbody>
</table>
</div>
<div
class="mj-accordion-content"
>
<table
cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"
>
<tbody>
<tr>
<td
style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"
>
<span>
Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>