Hide/Show table in my Email with the use of a button


Tags: html,css,email

Problem :

Recently I was setting up the code for sending my email and styling it with html/css. Though one person thought the mail text was quite messy and had the idea to create a button that shows or hides a table (so a show more or show less button).

This wouldn't be to much of a problem in a normal web page since its allowed to use either javascript, jquery or plain coding in there, however this is not allowed in mails (most mail clients don't support it).

So the question is, is it possible to give a button functionality in my email so that it shows or hides a particular table in my email body? And if so, how?

Here is some code I have so far for my email:

sBody="<font face=""Verdana, Arial"" size=2 color=""black"">Dear " & FirstName & ",<br><br>"
                sBody=sBody & "Recently you made a ticket concerning '<b>" & FormSubject &  "</b>'.<br>"
                sBody=sBody & "We will try to answer your question as quick as possible." & "<br><br>"

            sBody=sBody &  "<br>"

            sBody=sBody & "<table cellspacing=""0"" cellpadding=""0""><tr>" 
            sBody=sBody & "<td align=""center"" width=""200"" height=""35"" bgcolor=""#000091"" style=""-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"">"
            sBody=sBody & "<a href=""http://www.EXAMPLE.com/"" style=""font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block""><span style=""color: #FFFFFF"">Show ticket information</span></a>"
            sBody=sBody & "</td></tr> </table>"

            sBody=sBody &  "<table id=""tickethide"" style=""display: none;"">"
            sBody=sBody &  "<tr><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Send date</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">For department</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Type of ticket</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Subject</th><th style=""border: 1px solid black;""><font face=""Verdana, Arial"" size=2 color=""#000080"">Ticket description</th></tr>"

            sBody=sBody &  "<tr bgcolor=""#BEC0F7"">" 

I didn't pasted all of the body in here since it would give an overflow of code that isn't useful for this problem. Also notice I am programming (and setting up this email) in a classic ASP file, so that is the reason why I am using the & and double "". The created button now also uses a href but this will be left out once it has the show/hide functionality.



Solution :

Disclaimer: I'm not sure this can be done in a failsafe way. My method involves fairly modern CSS, so I don't know which email clients it works in. It works in SeaMonkey, but I don't have MS Office to test with.

The trick is to use a checkbox, that, when checked, makes the following block visible using a CSS "sibling" selector. No Javascript needed.

<style>
#showtable + label {color:blue; text-decoration:underline; cursor:pointer}
#showtable, #table {display:none}
#showtable:checked ~ #table {display:block;}
</style>

<font face="Verdana, Arial" size=2 color="black">Dear [[FirstName]] ,<br><br>
Recently you made a ticket concerning '<b> [[FormSubject]] </b>'.<br>
We will try to answer your question as quick as possible. <br><br>

<input type="checkbox" id="showtable" />
<label for="showtable">Click to show or hide the table</label>

<br><br>
<font id="table" color="#99FFDD" size=3>
<table cellspacing="0" cellpadding="0" bgcolor="#006633">
<tr><td>This is the table</td></tr>
<tr><td>with the information</td></tr>
</table>
</font>

Here is a JSFiddle where you can test live, but of course that's a normal webpage. For a real test, send the HTML to yourself in an email. Make sure to include the <style> block.


    CSS Howto..

    How to show a div behind navigation on rollover

    How to continue CSS list on new page?

    How to improve the way I use Textmate for Ruby on Rails, HTML, CSS and Javascript?

    How to make link change the css in the following page [closed]

    jQuery: How do I target the clicked element when they all share the same CSS class?

    how to add string to the class javascript(jquery)

    I want to add same function for two css class. How can I do it?

    HTML/ CSS: A href exceeds linking image - how to avoid?

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    My jquery slideshow is not functioning properly

    How to properly link CSS files with PHP footer and header

    How to make a div 100% width minus a certain amount?

    How to center a image with transparent background in css?

    css: How to add blank space under a sprint element

    How do I style a div with inner floats to expand horizontally to allow all inner floating divs to fit?

    How to animate an unknown number of items in sequence using css animations?

    How would you style this html so that everything falls into a table?

    How to set my span text vertical align and next to my image?

    Wordpress nav menu images not showing up in mobile safari

    How to select css id's with numbers in them?

    How to provide responsive design for svg?

    How to add CSS to an if else statement in PHP

    how to colour user selected option using CSS in Firefox

    How to implement Star Rating in Intel XDK by App Framework 3.0

    How to remove default border of button in jquery mobile?

    CSS Layout. Can not get idea how to fix it

    css - how to get (responsive) li's with the same height when they have a different width?

    How can that view be achieved? Collage / Magazine Products

    Keeping content “fixed” under slideshow of different image sizes

    How to make image “hang over” above background?