Progressive Disclosure

Hi guys,

Im having a hard time, getting a working link into the content, which is shown and hidden via the progressive disclosure technique.

Details about how this works in general is found

here: http://mobile.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/

and here: http://www.campaignmonitor.com/blog/post/3541/designing-ultra-short-emails-for-mobile-using-progressive-disclosure/

My problem on ios is, that no external link is openend in the browser, but hides the content again.

Can someone help, and post his code.

Thanks
Martin

roshodgekiss roshodgekiss, 1 year ago

Hi there Martin, this is Ros here - would it be possible for you to post your code in this thread? We'd be more than happy to test it out and see what's happening.

Thanks for checking out the tutorials!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Martin Berky, 1 year ago

Hi Ros,

this is the generic example, that is all around the web. I adjusted the readmore link, but clicking it on an iOS device just hides the content again. No external link is openend.

Thanks for your help

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ABC Widgets Newsletter</title>
<style>
a:hover {
    text-decoration: underline !important;
}
td.promocell p {
    color:#e1d8c1;
    font-size:16px;
    line-height:26px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:14px;
    font-weight:normal;
}
td.contentblock h4 {
    color:#444444 !important;
    font-size:16px;
    line-height:24px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    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;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top:0;
    margin-bottom:12px;
    padding-top:0;
    padding-bottom:0;
    font-weight:normal;
}
td.contentblock p a {
    color:#3ca7dd;
    text-decoration:none;
}
.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-device-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-family: "Helvetica Neue", Helvetica, sans-serif;
      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 {
      display: inline !important;
   }

   div[class="header"] {
       font-size: 16px !important;
   }
   table[class="table"], td[class="cell"] {
       width: 300px !important;
   }
    table[class="promotable"], td[class="promocell"] {
      width: 325px !important;
   }
    td[class="footershow"] {
       width: 300px !important;
   }
    table[class="hide"], img[class="hide"], td[class="hide"] {
      display: none !important;
   }
   img[class="divider"] {
      height: 1px !important;
   }
   td[class="logocell"] {
      padding-top: 15px !important;
      padding-left: 15px !important;
      width: 300px !important;
   }
   img[id="screenshot"] {
       width: 325px !important;
       height: 127px !important;
   }
   img[class="galleryimage"] {
       width: 53px !important;
       height: 53px !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" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<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="#link" class="link">First heading</a></strong> </h4>
                        <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;" > Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at nisl tellus, ac ultrices mauris. Vivamus sollicitudin nisi a neque euismod rutrum. Donec blandit varius dui vitae bibendum.</p>
                          <a href="https://www.google.de" class="readmore" style="font-size: 13px; color: #85bdad; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">Read more...</a> </div></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="#link" class="link">Second heading</a></strong> </h4>
                        <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; " > Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at nisl tellus, ac ultrices mauris. Vivamus sollicitudin nisi a neque euismod rutrum. Donec blandit varius dui vitae bibendum.</p>
                          <a href="https://www.google.de" class="readmore" style="font-size: 13px; color: #85bdad; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">Read more...</a> </div></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="30"><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"><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;"><strong>Edit your subscription</strong></preferences>
                          &nbsp;&nbsp;|&nbsp;&nbsp;
                          <unsubscribe style="color:#3ca7dd;text-decoration:none;"><strong>Unsubscribe instantly</strong></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"><br></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
Step, 1 year ago

Hey Martin.

I haven't attempted this yet.  But it might be worth adding in target="_blank" to the anchor tag to open the new content in another browser window. 

I also noticed you had the "readmore" class but no css assigned to that class as well?

Cheers
Step


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
Martin Berky, 1 year ago

Hi Step,

target="_blank" or removing the class does not change something on my side.

The main problem I believe is, that the hide css part is triggered by clicking the hyperlink.

Thanks
Martin

Step, 1 year ago

Hey Martin,

You're correct.  I attempted with CSS3 and it didn't work.   

   a.readmore {
        target-name:new;
        target-new:tab;
}

Will look into this again when I have some more time.
Cheers

Step


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
Martin Berky, 1 year ago

Hi Ros,

did you have the chance, to look into this?

Best
Martin

roshodgekiss roshodgekiss, 1 year ago

Hey there Martin, unfortunately I haven't had a chance to debug this just yet. I'll be sure to get to it in the week ahead. Sorry for the wait!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
roshodgekiss roshodgekiss, 1 year ago

Hey again Martin, I've been working steadily on this issue when I've had time and bumped into a couple of limitations. First of all, the use of :hover state here is in essence, a 'hack' - the iPhone doesn't have a :hover state per se, jus taps and drags. Why this is important is because the :hover state in this case is made inactive when you click on a link in the text, which in turn, makes the article content disappear.

I thought about using the checkbox hack, but this doesn't play nice with WebKit without a snippet of JS code. So that's out of the picture :(

The closest solution I've found so far is in this elegant, pure CSS menu tutorial by Philip Renich. However, you will notice that there's no way of making the content disappear - this is something I've been fooling around with.

Sorry for the wait here, but I'll keep tapping away at a fix - I'll update this thread and the docs once we have a more robust solution for you here. In the interim, I recommend placing the 'Read more' link outside of 'article', so it doesn't disappear when the article is collapsed.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
St3wpid, 1 year ago

Hey Guys...Have you got anywhere with this? I think I might have hacked a solution based on this:

http://www.cssplay.co.uk/menu/showme-more.html.

As far as I can tell it works like a dream but I don't have an iphone. I'm testing on safari on a desktop with the media query flipped around but I'm pretty confident it works.

roshodgekiss roshodgekiss, 1 year ago

St3wpid, thank you so much for sharing this - lovely! The demo works great in the iPhone's Safari browser, so I'd be keen to try this in email. Great work - if anyone has luck with this CSS Play technique before we get to it, please post your results here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jeremypeter, 1 year ago

I was able to get this to work with links embedded within the hidden content:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

</head>
<body yahoo="fix" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; background-color: #efefef; padding: 0; line-height: 100% !important; width: 100% !important;" bgcolor="#efefef">

  <table style="margin: 0; line-height: 100% !important; padding: 0; background-color: #efefef; width: 100% !important;" bgcolor="#efefef" cellpadding="0" id="backgroundTable" border="0" cellspacing="0">

    <tr>
      <td style="border-collapse: collapse;">
        <table class="main-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

      <!-- Start Article -->
          <tr>
            <td class="ptb20" style="padding-bottom: 20px; border-collapse: collapse; padding-top: 20px;">
              <table bgcolor="#ffffff" align="center" border="0" cellpadding="15" cellspacing="0" width="100%">

                <tr>
                  <td class="article" style="border-left-style: solid; border-collapse: collapse; border-left-width: 5px; border-left-color: red;">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    
                      <tr>
                        <td class="h2" style="font-size: 16px; border-collapse: collapse; line-height: 120%; -webkit-font-smoothing: antialiased; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">Kittens</td>
                      </tr>
                      <!-- end h2 header -->

                      <tr>
                        <td class="p" style="padding-bottom: 8px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 8px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">A kitten is a juvenile domesticated cat.</td>
                      </tr>
                      <!-- end paragraph -->

                      <tr>
                        <td style="border-collapse: collapse;">
                          <a class="hide" style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="#">Hide</a>
                          <a class="show" style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="#">Show</a>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                          
                            <tr>
                              <td style="border-collapse: collapse;" valign="top">
                                <img height="75" style="display: block; border: none; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" width="75" src="http://placekitten.com/75/75" />
                              </td>
                              <td class=" pl10 p pt0" style="padding-bottom: 8px; padding-left: 10px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 0px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" valign="top">
                                A feline litter usually consists of two to five kittens, <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://www.great-pictures-of-cats.com/image-files/cute-kittens-3.jpg">view image</a>. To survive, kittens need the <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://www.freeonlineserver.com/files/wallpapers/Animals/Mother_Cat_and_Kitten.jpg">care of their mother</a> 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.
                              </td>

                            </tr>

                            <tr>
                              <td class="p full-article" style="font-size: 0; height: 0; border-collapse: collapse; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;"><a style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="http://en.wikipedia.org/wiki/Kitten">Read the full article</a></td>
                            </tr>
                            <!-- end paragraph -->
                            
                          </table> 
                          <!-- END TABLE BLOCK -->
                          
                        </td>
                      </tr>

                      <tr>
                        <td class="p" style="padding-bottom: 8px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 8px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://en.wikipedia.org/wiki/Kitten">Read the full article</a></td>
                      </tr>
                      <!-- end paragraph -->
                      
                    </table> 
                  </td>
                </tr>

              </table>
            </td>
          </tr>
      <!-- End Article -->

      <!-- Start Article -->
          <tr>
            <td class="ptb20" style="padding-bottom: 20px; border-collapse: collapse; padding-top: 20px;">
              <table bgcolor="#ffffff" align="center" border="0" cellpadding="15" cellspacing="0" width="100%">

                <tr>
                  <td class="article" style="border-left-style: solid; border-collapse: collapse; border-left-width: 5px; border-left-color: red;">
                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    
                      <tr>
                        <td class="h2" style="font-size: 16px; border-collapse: collapse; line-height: 120%; -webkit-font-smoothing: antialiased; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold;">Etymology</td>
                      </tr>
                      <!-- end h2 header -->

                      <tr>
                        <td class="p" style="padding-bottom: 8px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 8px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">The word &quot;kitten&quot; derives from Middle English kitoun (ketoun, kyton etc.), which itself came from Old French chitoun, cheton: &quot;kitten&quot;.</td>
                      </tr>
                      <!-- end paragraph -->

                      <tr>
                        <td style="border-collapse: collapse;">
                          <a class="hide" style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="#">Hide</a>
                          <a class="show" style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="#">Show</a>
                          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                          
                            <tr>
                              <td style="border-collapse: collapse;" valign="top">
                                <img height="75" style="display: block; border: none; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" width="75" src="http://placekitten.com/75/75" />
                              </td>
                              <td class=" pl10 p pt0" style="padding-bottom: 8px; padding-left: 10px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 0px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" valign="top">The young of big cats are called <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://kittybloger.files.wordpress.com/2012/05/cute-kittens-20-great-pictures-1.jpg">cubs</a> rather than kittens. Either term may be used for the young of smaller wild felids such as <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://farm1.static.flickr.com/28/56861271_fc55a9c757.jpg">ocelots</a>, <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://bigcatrescue.org/wp-content/oqey_gallery/galleries/caracals-of-bcr/galimg/caracalsrose.jpg">caracals</a>, and <a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://bite-prod.s3.amazonaws.com/wp-content/uploads/2013/01/lynx13.jpg">lynx</a>, but &quot;<a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://www.tvgasm.com/wp-content/uploads/2012/02/cutest-kitten-hat-ever-13727-1238540322-17.jpgC">kitten</a>&quot; is usually more common for these species.</td>

                            </tr>

                            <tr>
                              <td class="p full-article" style="font-size: 0; height: 0; border-collapse: collapse; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;"><a style="font-size: 0; height: 0; line-height: 0; -webkit-font-smoothing: antialiased; padding: 0; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-hide: all; display: none;" href="http://en.wikipedia.org/wiki/Kitten">Read the full article</a></td>
                            </tr>
                            <!-- end paragraph -->
                            
                          </table>                           
                        </td>
                      </tr>

                      <tr>
                        <td class="p" style="padding-bottom: 8px; font-size: 13px; border-collapse: collapse; line-height: 19px; -webkit-font-smoothing: antialiased; padding-top: 8px; color: #888888; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a style="font-size: 13px; -webkit-font-smoothing: antialiased; color: #85BDAD; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;" href="http://en.wikipedia.org/wiki/Kitten">Read the full article</a></td>
                      </tr>
                      <!-- end paragraph -->
                      
                    </table>                     
                  </td>
                </tr>

              </table>
            </td>
          </tr>
      <!-- End Article -->

        </table>
      </td>
    </tr>

  </table>
  <!-- end table wrapper -->

   <style type="text/css" data-premailer="ignore">
    /***************************************
               MOBILE STYLES
    ****************************************/
    
    @media only screen and (max-width: 480px){

      body[yahoo] { font-size: 100%; }

      body[yahoo] .h2 { font-size:120% !important; }

      body[yahoo] td, 
      body[yahoo] td a { font-size: 95% !important; line-height: 1.5 !important; }

      body[yahoo] .main-table { width:90% !important; }

      body[yahoo] .main-table table { width:98% !important; }

      body[yahoo] .article { position: relative;}

      body[yahoo] .hide,
      body[yahoo] .show,
      body[yahoo] .full-article,
      body[yahoo] .full-article a{
        display:inline-block !important;
        font-size: 100% !important;
        height: auto !important;
        line-height: 1.5 !important;
      }
      /* Display hidden elements */
      
     
      body[yahoo] .show, 
      body[yahoo] .hide { 
        background-color: #dedede; 
        border-radius: 10px;
        color: #ffffff !important; 
        font-weight: bold;
        position: absolute; 
        right:15px; 
        text-align: center;
        text-decoration: none;
        top: 20px; 
        width: 60px; 
      }

      body[yahoo] .hide ~ table {display:none;}
      body[yahoo] .show:hover { z-index: -1 }
      body[yahoo] .show:hover ~ table {display:inline;}

      body[yahoo] .show ~ table:hover {display:inline;}

      body[yahoo] .full-article { 
        position: absolute; 
        background-color: #ffffff;
        padding: 8px 8px 8px 0 !important;
        bottom: 20px;
        left: 15px;
      }
      
    }
    

     /***************************************
             CLIENT SPECIFIC STYLE
    ****************************************/
    body { width: 100% !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; margin: 0 !important; padding: 0 !important; }
    .ExternalClass { width: 100% !important; }
    .ExternalClass { line-height: 100% !important; }
    body { background-color: #efefef !important; margin: 0 !important; padding: 0 !important; width: 100% !important; line-height: 100% !important; }
    #backgroundTable { background-color: #efefef !important; margin: 0 !important; padding: 0 !important; width: 100% !important; line-height: 100% !important; }
    img { display: block !important; outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic !important; border: none !important; }
  </style>

</body>
</html>

I'm not sure how well it works on Android devices, but it worked on my iPhone 4s.

One issue I noticed is that after a link has been clicked within the hidden content, the button changes back from (hide) to (show). You then have to click the button twice to hide the content again.

It would probably be better to have the two buttons side by side or something instead of having them layered on one another.

roshodgekiss roshodgekiss, 1 year ago

This is great, jeremypeter - thank you so much for sharing your solution here! If anyone does get a chance to test on Android, we'd be keen to see how it goes. :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account