Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Forking the toggled progressive disclosure template found at the Campaign Monitor 2-column layout (originally at http://www.campaignmonitor.com/guides/mobile/responsive/)

View progressive-template.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
<!--
Progressive Disclosure Demo - Updated 15 August, 2012 by Ros
Thank you for taking a look under the hood of our progressive disclosure demo. Please note that this is a work in progress, so it's a tad messy and bound to change.
If you have any questions, feel free to pop a line to support@campaignmonitor.com - we might learn something, too!
Known bugs
----------
To do
----------
- Given the limitation above, v2 will be likely to be based on Philip Renich's CSS menu demo (http://www.elfboy.com/blog/making_css_drop_down_menus_work_on_the_iphone/). See this forum post for the current discussion: https://www.campaignmonitor.com/forums/post/25735/#p25735
-->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0; user-scalable=1;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progressive Disclosure sample template</title>
<style>
body, p {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust:none;
}
a:hover {
text-decoration: underline !important;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
.readmore {
font-size: 13px;
color: #85bdad;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
img {
display: block;
}
a.mobileshow, .mobilehide {
display: none;
color: #fff; /*for Gmail */
}
/* Mobile stylesheet for iPhone and Android */
@media only screen and (max-width: 480px) {
table {
position: relative;
}
a[class="mobileshow"], a[class="mobilehide"] {
display: block !important;
color: #fff !important;
background-color: #aaa;
border-radius: 20px;
padding: 0 8px;
text-decoration: none;
font-weight: bold;
font-size: 11px;
position: absolute;
top: 25px;
right: 10px;
text-align: center;
width: 40px;
}
div[class="article"] {
display: none;
}
a.mobileshow:hover {
visibility: hidden;
}
.mobileshow:hover + .article,
.article:hover {
/* .article:hover to inherit the state of a tapped link, keeping the box visible - eg */
display: inline !important;
}
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
padding-left: 25px;
padding-right: 25px;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) {
.article {
display: inline !important;
}
a.mobileshow, a.mobilehide {
display: none !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" style="margin: 0; padding: 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tr>
<td bgcolor="#e4e4e4" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" class="cell"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ef3101" nowrap><img border="0" src="images/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"><strong><a href="http://en.wikipedia.org/wiki/Kitten" class="link">Kittens</a></strong> </h4>
<p>A kitten is a juvenile domesticated cat.</p>
<a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
<div class="article">
<p class="bodytext"><img src="http://placekitten.com/75/75" style="margin: 0 10px 10px 0; float: left;" >A feline litter usually consists of two to five kittens. To survive, kittens need the care of their mother for the first several weeks of their life. Kittens are highly social animals and spend most of their waking hours playing and interacting with available companions.</p>
</div>
<a href="http://en.wikipedia.org/wiki/Kitten" class="readmore">Read the full article</a></td>
</tr>
</table></td>
</tr>
</table>
<img border="0" src="images/spacer.gif" width="1" height="15" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ef3101" nowrap><img border="0" src="images/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong><a href="http://en.wikipedia.org/wiki/Kitten" class="link">Etymology</a></strong> </h4>
<p>The word &quot;kitten&quot; derives from Middle English kitoun (ketoun, kyton etc.), which itself came from Old French chitoun, cheton: &quot;kitten&quot;.</p>
<a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
<div class="article">
<p class="bodytext"><img src="http://placekitten.com/75/75" style="margin: 0 10px 10px 0; float: left;"> The young of big cats are called cubs rather than <a href="#">kittens</a>. Either term may be used for the young of smaller wild felids such as ocelots, caracals, and lynx, but &quot;kitten&quot; is usually more common for these species.</p>
</div>
<a href="http://en.wikipedia.org/wiki/Kitten" class="readmore">Read the full article</a></td>
</tr>
</table></td>
</tr>
</table>
<img border="0" src="images/spacer.gif" width="1" height="15" class="divider"><br></td>
</tr>
</table>
<img border="0" src="images/spacer.gif" width="1" height="25" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
<tr>
<td><img border="0" src="images/spacer.gif" width="1" height="25" class="divider"><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" nowrap bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="380" valign="top" class="footershow"><img border="0" src="images/spacer.gif" width="1" height="8" class="divider"><br>
<p style="color:#a6a6a6;font-size:12px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:15px;padding-top:0;padding-bottom:0;line-height:18px;" class="reminder">You’re receiving this because you’re an awesome ABC Widgets customer or subscribed via <a href="http://www.abcwidgets.com/" style="color:#a6a6a6;text-decoration:underline;">our site</a>.</p>
<p style="color:#c9c9c9;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<preferences style="color:#3ca7dd;text-decoration:none;">Edit your subscription</preferences>
&nbsp;&nbsp;|&nbsp;&nbsp;
<unsubscribe style="color:#3ca7dd;text-decoration:none;">Unsubscribe instantly</unsubscribe>
</p></td>
<td align="right" width="220" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;text-shadow: 0 1px 0 #ffffff;" valign="top" class="hide"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="http://www.flickr.com/photos/freshview"><img border="0" src="images/flickr.gif" width="42" height="32" alt="See our photos on Flickr"></a></td>
<td><a href="http://twitter.com/campaignmonitor"><img border="0" src="images/twitter.gif" width="42" height="32" alt="Follow us on Twitter"></a></td>
<td><a href="http://www.facebook.com/campaignmonitor"><img border="0" src="images/facebook.gif" width="32" height="32" alt="Visit us on Facebook"></a></td>
</tr>
</table>
<img border="0" src="images/spacer.gif" width="1" height="10"><br>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:bold;">ABC Widgets</p>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:normal;">87 Street Avenue, California, USA</p></td>
</tr>
</table></td>
</tr>
</table>
<img border="0" src="images/spacer.gif" width="1" height="25" class="divider"><br></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

I came across this as our company is wanting to move towards mobile friendly emails. I was curious to see how the show/hide buttons worked on my HTC One, so I sent it to myself using our email marketing tool. I have a gmail account and use the gmail app on my phone. here is the image https://googledrive.com/host/0B6WiDLBw5RnubmlrbUhiSEpTdmM/Screenshot_2014-03-14-13-59-06_1.jpg Why would this email do this? Does a different media query need to be made for higher pixel density devices? Or is it just a gmail thing?

mightymight88. I know this reply is way too late, but Gmail strips out any CSS between style tags. That's what makes email so frustrating.

v3nt commented

i've got this mostly working but I've had to remove the position : absolute for the more link as it was at the top of the email. The table position: relative; doesn't seem to work.

But once the article is visible i can't seem to hide it again? On pressing Hide the show more link becomes visible but the .article stays visible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.