Is it possible to collapse/expand a DIV within an email? What clients support this?

Question

I have an alerting system that sends out alerts by email. I would like to include diagnostic information but only make it visible if the end user clicks a [+] button.

Is this possible to do in email? Can I do it without using Javascript and only CSS?

If it helps, most of my clients use Outlook, iPhones, or Blackberries

Answer 1

Most likely, not. JS has been disabled in a lot of clients, due to viruses and stuff.

A workaround might be to include a URL to the full error-page with all details, and edit your mail to only summarize the diagnostic information.

Also, you could try to see if you can use :hover CSS, to show the element with some nasty selectors... CSS3-style? http://www.campaignmonitor.com/css/

Answer 2

You can do this with a checkbox, but I don't know if it is cross email client compatible. I would thoroughly check it. Here's some more information:

Reveal and hide a div on checkbox condition with css

There are tonnes of other examples throughout the web. Here is a really good working example on Litmus which uses a Hamburger Menu:

https://litmus.com/community/discussions/999-hamburger-in-email

Here's the simplified version:

<style>
#hidden-checkbox:checked + div #menu{
  ... css to display menu ...
}
</style>
<input id="hidden-checkbox" type="checkbox">
<div>
  <label for="hidden-checkbox">Hamburger Button</label>
  <div id="menu">Menu Content...</div>
</div>

Answer 3

Based on https://stackoverflow.com/a/31743982/2075630 by Eoin, but using classes to avoid the use of IDs for this.

Edit. For me it works for standalone HTML files, but not in Emails; In Thunderbird, the checkbox is not changeable, and in Gmail <style> tags are stripped before displaying the email and applied statically as inline style attributes. The latter probably means, that there is no way to make it work for Gmail recipients, for Thunderbird I am not sure.

Minimal example

<style>
.foldingcheckbox:not(:checked) + * { display: none }
</style>
<input type="checkbox" class="foldingcheckbox" checked/>
<div class=>Foldable contents</div>

.foldingcheckbox:not(:checked) selects all unchecked checkboxes with class foldingcheckbox.

.foldingcheckbox:not(:checked) + * selects any element directly after such a checkbox.

.foldingcheckbox:not(:checked) + * { display: none } hides those elements.

The attribute checked makes it so, that the default state of the checkbox is to be checked. When omitted, the default state is for the checkbox not to be checked. The state is preserved when reloading the page at least in this simple example.

Larger, visually more appealing, example

In order to demonstrate how it works for larger examples:

<style>
.foldingcheckbox { float: right; }
.foldingcheckbox:not(:checked) + * { display: none }
h1, h2 { border-bottom: solid black 1pt }
div { border: 1px solid black; border-radius: 5px; padding: 5px }
</style>
<h1>1. Hello there</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
  <p>Hello World.</p>
  <p>This is a test.</p>
  <h2>1.2. Nesting possible!</h2>
  <input class="foldingcheckbox" type="checkbox" checked/>
  <div>
    <p>Hello World.</p>
    <p>This is a test.</p>
  </div>
</div>
<h1>2. More things.</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
  <p>This is another test.</p>
  <p>This is yet another test.</p>
</div>