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 make child element do not fill his parent when hover is performed in CSS?

    How to position main content below header and footer in css

    How to rotate an element and correctly position it with CSS or jQuery

    How to make CSS for search results

    How to format text in input box with css

    How to make background color extend all the way to bottom of page / content?

    How can I get rounded corners to fit over other content?

    How to display first tab by default in css?

    Hide element, but show CSS generated content

    how to choose what transform is applied first in css

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How can I change my div box to a link?

    How to find all inputs which is not inside one div with css selector?

    How to change an image onclick while li on current status using pure CSS?

    how to increase the font-size without making it thicker

    How can I set a html web page adapt to only a tablet size or large screen in css? [closed]

    How do you add PHP to CSS?

    how to allow transform in htmlpurifier

    How to give slide down effect when hover?

    How to get css property value in pure javascript

    How do you make 2 YouTube videos automatically play one after the other?

    how to add a home button from css in jquery mobile?

    How to identify element using link name in a onclick html tag?

    How to write different HTML for different screen sizes

    How to make flashing text in Css? [duplicate]

    How do I animate a div with css3 to move and spin?

    CSS: How to change font-size of something that already has “font-size: 0.9em !important” on it [duplicate]

    How to eliminate the padding in the nav menu from Refinery CMS?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    Pure JavaScript - how to add class to a class? Or change style in class