Toggle visibility of a table in my email using a clickable button

Recently, while setting up the code for my email and styling it with HTML/CSS, someone suggested adding a button to show or hide a table in the email body to make the content more organized. However, this poses a challenge as most mail clients do not support JavaScript, jQuery, or other coding languages typically used for interactive elements on web pages.

So, my question is, is it possible to create a functional button in an email that can toggle the visibility of a specific table in the email body? If so, how would I go about implementing this?

Below is a snippet of the code I have 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"">"

Not all the code for the email body is included here to avoid overwhelming the reader with unnecessary information. Additionally, please note that I am using classic ASP for programming and setting up this email, which explains the use of "&" and double quotation marks. The current button implementation uses an href tag, but this will be removed once the show/hide functionality is added.

htmlcssemail

Answer №1

Important Notice: Please be aware that the method described below may not work flawlessly in all email clients due to its reliance on modern CSS features. While it has been successfully tested in SeaMonkey, compatibility with other clients such as MS Office is uncertain.

The concept involves utilizing a checkbox to toggle the visibility of a specific block using a CSS "sibling" selector, eliminating the need for JavaScript.

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

If you wish to test this functionality live, you can do so by visiting this JSFiddle link. However, for an accurate assessment, consider sending the HTML code to yourself via email along with the necessary <style> block.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve a seamless look by ensuring shadows are positioned behind every element

Need help with creating dynamic shadows on divs. Here is what I have so far: HTML <div id="wrapper"> <div id="div1" class="castsshadow">Div 1</div> <div id="div2" class="castsshadow">Div 2</div> <div id="div3" ...

jqueryhtmlcss

Only one component in Angular is utilizing the scss design

I have a component that generates multiple buttons next to each other, each with a specific style. Additionally, each button is randomly assigned a different color based on its class. The issue I am facing is that when I include this component in one of m ...

htmlcssangulartypescriptcomponents

Show schedule in an HTML chart

I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below: https://i.sstatic.net/daDHy.png The table itself is quite simple, but I am having trouble figuring out how to ...

jqueryhtmlcss

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

When using jQuery's remove() or after() functions, be aware that they may inadvertently remove

Here is the html code I am working with: <p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p> <p>This is some random text in a paragraph with a <span class="blue">blue</span> ...

javascriptjqueryhtmlgoogle-chrome

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

javascripthtmlangularjsformsmodel-view-controller

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...

javascripthtmlangularjs

Retrieving text data from the JSON response received from the Aeris API

I am attempting to showcase the word "General" text on the HTML page using data from the API found under details.risk.type. The JSON Response Is As Follows... { "success": true, "error": null, "response": [ ...

javascripthtmljsonapisdk

Update the content of an image in a Div without altering its filename

My application's backend updates an image file and sends the filename back to the front-end: $('#giffinal').html(ResponseGo); However, when I update the image again through the backend, the code in the div on the front-end does not change. ...

javascriptjqueryhtml

Place the navigation elements vertically in a single column

My menu bar is structured as shown below <header> <nav> <a href="#">Home</a> <a href="#">Our Story</a> <a href="#">Tools</a> <a href="#">Technolo ...

phpjquerycsshtml

Ensure that the browser is instructed to utilize a designated Accept field within the HTTP request

Can a web browser be directed to use a specific mime-type in an HTML request? For example, can we achieve this with the following code: <a type="application/pdf" href="https://url.com/">PDF</a> or <a type="text/html ...

htmlhttpwebmime-types

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

htmltwitter-bootstrapcss

Alert: The attempt to include_once(headerSite.php) has encountered an error as the file does not exist in the specified directory

I'm a beginner in PHP and encountering the following errors: Warning: include_once(headerSite.php): failed to open stream: No such file or directory in C:\xampp\htdocs\dbtest\index.php on line 3 Warning: include_once(): Failed ope ...

phphtmlmysqlapache

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally. Creating a single line of divs is straightforward, but it&apo ...

javascripthtmlcss

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

jqueryjquery-animatecss

What is the best way to transmit the "theme" property to "Components" within a next.js application?

I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...

cssreactjsnext.jscomponentsreact-props

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

htmlcss

comparing multiple values separated by commas with JavaScript

I need validation using a comma-separated value format. Within the illustration, there are two fields: "Saloon Price" (value: 10,10,10,10) and "Saloon Offer Price" (value: 11,11,11,11). The first value must be less than the second. Saloon price Value & ...

javascriptphpjqueryhtml