mjml-0.1.0.0: test/fixtures/mj-accordion-other.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]-->
<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
class="testing-accordion" style="background:green;font-size:0px;padding:2px;padding-right:3px;word-break:break-word;"
>
<table
cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:1px solid red;border-bottom:none;font-family:Comic;"
>
<tbody>
<tr
class="testing-first"
>
<td style="padding:0px;background-color:red;">
<label
class="mj-accordion-element" style="font-size:13px;font-family:Arial;"
>
<!--[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:1px solid red;"
>
<tbody>
<tr>
<td
style="width:100%;font-size:13px;font-family:Arial;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:1px solid red;"
>
<tbody>
<tr>
<td
style="font-size:13px;font-family:Arial;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:1px solid red;"
>
<tbody>
<tr>
<td
class="testing-title" style="width:100%;background-color:orange;color:purple;font-size:13px;font-family:Comic;padding:16px;"
>
How it works
</td>
<!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;background:orange;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:1px solid red;"
>
<tbody>
<tr>
<td
class="testing-text" style="background:brown;font-size:13px;font-family:Comic;line-height:1;color:red;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>