Progressive Disclosure buttons not appearing on mobile

Hello peoples,

I've been attempting to add the progressive disclosure feature to my client's email newsletter. 

For some reason the Show/Hide buttons won't show up in mobile view when I have the display: none css for the desktop part of the email.  If I remove this, then it does work more or less, but then it also shows the buttons on desktop which I don't want.

Does anyone have any idea what might be causing this issue.  Doesn't seem to be a common problem...

For the most part I copied the example code given on other sites. This is under the @mobile tag:

div[class="text"] {
    position:relative !important;
}

 a[class="mobileshow"], a[class="mobilehide"] {
         display: block !important;
        position: absolute !important;
        float:left !important;
        padding: 0 8px; 
        color: #fff !important; 
        background-color: #B2B1B1 !important; 
        border-radius: 5px; 
        text-decoration: none;
        margin-bottom: 10px !important;
        margin-right: 100px;
        text-align: center; 
        width: 40px;
    }


 div[class="article"] {
 display: none !important;
 padding-top:10px !important;
}

 a.mobileshow:hover {
 visibility: hidden !important;
 }

 .mobileshow:hover + .article,
 .article:hover {
     /* .article:hover to inherit the state of a tapped link, keeping the box visible - eg */
 display: inline !important;
}

and html:

<layout label="Image and text">
                        <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                            <tbody><tr>
                                    <td>
                                    <table class="article-content" width="200" cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tbody><tr>
                                    
                                    <td valign="top"><img class="main" editable src="images/99Kane_01.jpg" width="200" label="listing1" /></td>
                                    
                                    </tr></tbody></table>
                                    
                                <table class="article-content" width="370" cellpadding="0" cellspacing="0" border="0" align="right">
                                        <tbody><tr>    
                                    <td valign="top">
                                    
                                   <div class="text">
                                    <p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
                                    
                                   <a href="#" class="mobilehide">Less</a> <a href="#" class="mobileshow">More</a>
                                    <div class="article" align="left">
                                        
                                        <p class="bodytext"><multiline label="Description">Enter text here. </multiline></p>
                                    </div></div>
                                </td></tr></tbody></table></td>
                            </tr>
                            <tr><td class="w580" width="580" height="10"></td></tr>
                        </tbody></table>
                    </layout>

I feel like it must be something small, but I've been troubleshooting different solutions for a while and cannot get it to work.

Thanks for any help/advice!!

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