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!!

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098