Trying to understand progressive disclosure buttons

Hey all, I've been trying to understand the progressive disclosure technique detailed in Campaign Monitor's responsive design guide (thank you so much for writing it, CM!).

I've been applying the technique to a template I'm working on and coming up a cropper. I can get the show/hide buttons to display:none for the desktop view; and I can get the .article to appear when my mouse hovers over the 'show' button; but I can't get the absolute positioning to work - as soon as I put that code in, my buttons disappear! Unfortunately of course, because I'm not absolutely positioning them, both the show and hide buttons display at the same time, which isn't quite what I was looking for ;)

I suspect the positioning issue is coming about because my tables etc. are narrower to the example code, so I've pasted below the relevant parts (hopefully!) in the hope that someone can help me understand how to apply the concepts better to this situation?

...also, how does :hover work on a mobile??

<style>
/* Smaller Screen Styles */
@media only screen and (max-width: 480px) {
table[id=backgroundTable]{
    max-width:550px !important;
    width:100% !important;
}        
table[id=newsletterWrapper],table[class=preheader],table[class=masthead],table[class=donate],table[class=newscol],table[class=articles],table[class=asides],table[class=previousissues],table[class=subscriptions],table[class=footer]{ 
        width:100% !important;
}
a[class="mobileshow"], a[class="mobilehide"] { 
        display: inline-block !important; 
    color: #fff !important; 
    background-color: #49A942; 
    border-radius: 5px; 
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    font-family: Helvetica, Arial, sans-serif;
    position: absolute;
    top: 25px;
    right: 10px;
    width:40px; 
}
div[class="article"] {
        display: none;
}
a.mobileshow:hover { 
        visibility: hidden;
} 
.mobileshow:hover + .article, .article:hover {
        display: inline !important;
}
}
/* Template Styles */
a[class="mobileshow"], a[class="mobilehide"] {
    display: none; !important;
}
</style>
<table id="backgroundTable" width="100%"> /* provides the background to the email */
   <table id="newsletterWrapper" align="center" width="554"> /* wraps the entire content of the email */
      <table class="newscol" align="left"> /* this table is repeated as often as needed for each 'level' of content in the email */
         <table class="articles" width="300">
            <tr>
               <td valign="top">
                  <h3>Heading</h3>
          <a href="" class="mobilehide">Hide</a> <a href="" class="mobileshow">Show more</a>
             <div class="article">
          <img src="" alt="" title="" align="right" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-left:10px;">
          <p>body copy</p>
          <a class="button">Read more</a>
          </div>
               </td>
            </tr>
         </table>  
      </table>
   </table>
</table>

nb: there's table rows and cells within the tables above, I've just tried to condense the structure so you can see at a glance how I've built the framework. The articles table is only 300px wide because I have other tables acting as a second column on the desktop view.

Cheli, 3 years ago

Update: the absolute positioning DOES work...its positioning the buttons at the top right of the entire email, rather than within the <td> they're located in! How do I absolutely position within the <td>?!

roshodgekiss roshodgekiss, 3 years ago

Hi Cheli, try applying the position: relative; CSS property to the <td> that the link is nested in. Hopefully you'll have better luck that way :)


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

Thanks Ros,

I found this conversation helped me understand how to do what you suggested: http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td

So now I have a class on each <td> with a progressive disclose and a position: relative style. My buttons have absolute positioning and are now working!

I haven't tested this code in a mobile environment yet but I imagine CM has - can you quell my concerns that this will actually work? I thought hover states don't translate to touch screens?

roshodgekiss roshodgekiss, 3 years ago

Hi there Cheli, support for the position CSS property on mobile devices is actually pretty good - not perfect, but good. The use of media queries generally filters out less compatible email clients, anyway.

As for the hover state question, sorry for not addressing this before! Actually, this is a bit of a hack (as you've likely guessed) - here's a summary on how iOS interprets :hover. In essence, it's interpreted as a tap, which makes it ideal for this technique.

Please let me know if there's anything else we can clarify here - so happy that we've got things working here! :D


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

Thanks Ros, especially for sharing that link! Most of our readers seem to use an iPhone if they're on a mobile device so we should be fine, although I'll test it on my Android phone as well to see how we go supporting others - this article seems to suggest Android interpret :hover as a tap but I don't feel confident counting my chickens yet!

roshodgekiss roshodgekiss, 3 years ago

Fingers crossed - I seem to remember this worked on Android devices, but let us know how you go! :D


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

Will do! Depending on what we find out, it may be worth adding a warning note in the responsive design guide so people know they may need to test the functionality on their devices, because I didn't originally realise that this hack may not be universally supported.

What am I saying, NOTHING in email design is universally supported! But I do think a little heads up on this tip would help ;)

roshodgekiss roshodgekiss, 3 years ago

Hah, thanks for this, Cheli! I've made a note, so next time we revise our guide, we might slip a word of warning in :) Cheers for the great suggestion!


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

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098