My client wants a responsive email in which text is not displayed at it's fullest but it's already embedded in the body of the email. When the user clicks on "click more" the text expands and all the text becomes visible. Is that possible?
As far as I know pseudo-classes are not possible on email clients, and building an accordion with inline coding is technically very difficult. Any ideas?
This is quite an old one but Matthew is right. You can't (rather shouldn't) try to make emails work using accordions, as these require either JS or advanced CSS3. Both of which have little or no support in email clients, even new ones.
The closest I was able to find when I had a similar request was using a CSS design from Responsive Email Patterns It works on some clients but not all of them.
Also, instead of using an Accordion, you could use "tabs" instead. This, although not 100% bulletproof, is supported by more clients. See here for an example.
(Following Leon's suggestion) Simply put, unless you aim at using simple CSS, you should really forget about responsiveness and complex interactions, other than adjusting widths and the like.
It's far simpler to either use anchors to link to full-article text from the top or use external links. Responsive emails are way overrated and bring too much complexity to something that people expect to be simple: reading an email.
I feel you can use amp to support accordions https://amp.dev/documentation/components/amp-accordion/.
AMP mails are supported by Almost all of Gmail clients, yahoo and some other email providers. It could be too technical to create amp script yourself.
You can try mailmodo which gives user friendly way to create dynamic email templates (for amp supported clients) along with proper fallback html for these dynamic components for non amp supported clients. Though they don't support accordions yet but they are planning to add it to their widget list in May 2022.
Copy whole code as is save as .html and run it will work only on IOS devices on Desktop (outlook, Gmail, Yahoo) by default it's open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if IE]>
<style>
sup,sub { font-size: 80% !important; display:inline !important; line-height:1em !important; vertical-align:top !important;}
sub { vertical-align:bottom !important; }
</style>
<![endif]-->
<!--[if gte mso 12]>
<style>
sup,sub{ font-size: 100% !important; vertical-align:top !important; display:inline !important;}
sub { mso-text-raise:-0.15em; }
</style>
<![endif]-->
<style>table{border-collapse:collapse}@media screen and (max-width: 480px), yahoo and (max-width: 480px), print and (max-width: 552px){*{box-sizing:border-box;word-break:break-word;-webkit-text-size-adjust:none;text-size-adjust:none;mso-line-height-rule:exactly}html,body{width:100vw}body{margin:0px !important;padding:0px !important;font-family:Arial,Helvetica,sans-serif;color:#555;background:#fff !important}.mobile_padding{padding-left:6%!important;padding-right:6%!important}.wrapper{background:#fff !important}.body_table{box-shadow:none !important}.device_width{width:100% !important;display:table}.brand{padding-top:20px}.preheader_sec{padding-bottom:0px !important}.brand img{max-width:150px}}.expanded-row-content{border-top:none;display:grid;grid-column:1/-1;justify-content:flex-start;color:#AEB1B3;font-size:13px;background-color:#fff}.hide-row{display:none}</style>
<style type="text/css">.ReadMsgBody{width:100%}.ExternalClass{width:100%}.ExternalClass *{line-height:100%}div,p,a,li,td{-webkit-text-size-adjust:none;-ms-text-size-adjust:none}TD IMG{display:block;border:0}table{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt}table td{border-collapse:collapse}a:link{color:#000001;text-decoration:none}a:active{color:#000001;text-decoration:none}a:visited{color:#000001;text-decoration:none}a:hover{color:#000001;text-decoration:none}textarea{resize:none}textarea:focus,input:focus{outline:none}body{margin:0;font-family:Arial,Helvetica,sans-serif}.appleLinks a{color:inherit !important;text-decoration:none}@-ms-viewport{width:device-width}@media only screen and (max-width: 480px){body[yahoo] .container{width:100% !important}body[yahoo] .mobile-hidden{display:none !important}body[yahoo] .photo{width:100% !important;height:auto !important}body[yahoo] .mobile-padding{padding-right:20px !important;padding-left:20px !important}body[yahoo] .drop{width:100% !important;float:left !important}body[yahoo] .left{float:left !important}body[yahoo] .text-left{text-align:left !important}body[yahoo] .logo{width:100px !important;height:auto !important}body[yahoo] .show{display:block !important;margin:0 !important;padding:0 !important;overflow:visible !important;width:100% !important;max-height:inherit !important}body[yahoo] .footer-logo{width:95px !important;height:auto !important}body[yahoo] .padding15{padding-top:15px !important;padding-bottom:15px !important}body[yahoo] .padding20{padding-top:20px !important;padding-bottom:20px !important}body[yahoo] .padding0{padding:0 !important}body[yahoo] .paddingtop0{padding-top:0px !important}body[yahoo] .paddingtop10{padding-top:10px !important}body[yahoo] .paddingtop15{padding-top:15px !important}body[yahoo] .paddingtop20{padding-top:20px !important}body[yahoo] .paddingright20{padding-right:20px !important}body[yahoo] .paddingbottom0{padding-bottom:0px !important}body[yahoo] .paddingbottom10{padding-bottom:10px !important}body[yahoo] .paddingbottom15{padding-bottom:15px !important}body[yahoo] .paddingbottom20{padding-bottom:20px !important}body[yahoo] .paddingleft0{padding-left:0px !important}body[yahoo] .paddingleft20{padding-left:20px !important}body[yahoo] .cta{width:100% !important}body[yahoo] .hidden{display:none !important}body[yahoo] .center{margin:0 auto}body[yahoo] .text-center{text-align:center !important}body[yahoo] .ctafix{line-height:18px !important;padding-top:10px !important;padding-bottom:10px !important}body[yahoo] .font20{font-size:20px !important;line-height:24px !important}body[yahoo] .font15{font-size:15px !important;line-height:19px !important}body[yahoo] .font18{font-size:18px !important;line-height:22px !important}body[yahoo] .font14{font-size:14px !important;line-height:18px !important}body[yahoo] .font13{font-size:13px !important;line-height:17px !important}body[yahoo] .width50{width:50px !important;height:auto !important}body[yahoo] .width70{width:70px !important;height:auto !important}body[yahoo] .width15{width:15px !important;height:auto !important}}@media yahoo, only screen and (min-width:0){body[yahoo] .mj-accordion-element{display:block}input.mj-accordion-checkbox,.mj-accordion-less{display:none !important}input.mj-accordion-checkbox+* .mj-accordion-title{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none}input.mj-accordion-checkbox+* .mj-accordion-content{overflow:hidden;display:none}input.mj-accordion-checkbox+* .mj-accordion-more{display:block !important}input.mj-accordion-checkbox:checked+* .mj-accordion-content{display:block}input.mj-accordion-checkbox:checked+* .mj-accordion-more{display:none !important}input.mj-accordion-checkbox:checked+* .mj-accordion-less{display:block !important}}</style>
</head>
<body bgcolor="#efefef" class="body_full" style="padding:0; margin:0px;">
<table class="wrapper" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="min-width:100%; min-height:100%; background-color:#efefef;">
<tbody>
<tr>
<td class="noTopPadding pb0" style="padding-top:30px; padding-bottom:30px;" align="center">
<center>
<table class="body_table device_width" width="660" cellspacing="0" cellpadding="0" border="0" align="center" style="margin:0 auto; background-color:#ffffff; ">
<tr>
<td>
<!-- Accordion Section starts -->
<div style="">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:660;" width="660"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:660;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td class="mobile_padding" style="direction:ltr;font-size:0px;padding:0px 33px 0px 33px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:660;"
>
<![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%">
<tr>
<td style="font-size:0px;padding:1px;word-break:break-word;">
<table cell-spacing="0" cell-padding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:none;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 cell-spacing="0" cell-padding="0" style="width:100%;border-bottom:none;background-color:#f0efef;">
<tbody>
<tr>
<td class="fs14" style="width:100%;background-color:#f0efef;color:#00a160;font-size:20px;font-family:Arial, Helvetica, sans-serif;padding:5px 10px; line-height:25px"> <b>Click here to check accordion functionality</b></td>
<!--[if !mso | IE]><!-->
<td class="mj-accordion-ico" style="padding:4px 10px 4px 5px;background:#f0efef;vertical-align:middle;">
<span class="mj-accordion-more" style="display:none;width:18px;height:18px;font-size:20px; line-height:25px;font-family:Arial, Helvetica, sans-serif;color:#231F20;">+</span>
<span class="mj-accordion-less" style="display:none;width:18px;height:18px;font-size:20px; line-height:25px;font-family:Arial, Helvetica, sans-serif;color:#231F20;">-</span>
</td>
<!--<![endif]-->
</tr>
</tbody>
</table>
</div>
<div class="mj-accordion-content">
<table cell-spacing="0" cell-padding="0" style="width:100%;border-bottom:none;">
<tbody>
<tr>
<td class="fs11" align="left" valign="top" style="font-size:12px; line-height:15px;font-family:Arial, Helvetica, sans-serif;color:#231F20;padding:7px 7px 20px 7px;text-align: justify;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!-- Accordion Section ends -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
© 2022 - 2024 — McMap. All rights reserved.
CSSorJavaScriptfor accordion. Example: w3schools.com/tags/tryit.asp?filename=tryhtml5_summary – Sushi