Collapsible table in HTML Email (Outlook 2007-2010)

Question

I've sent various HTML emails in the past, and have seen the pretty large limitations associated with it. What I really need is the ability to have regions with a show/hide ability - click the plus sign or a header to toggle.

I'm figuring JS is out of the picture, CSS might be a possibility. I only need it to work in Outlook 2007-2010. Any suggestions?

Thanks!

Answer 1

You can do this in Outlook using anchor tags. The trick is to create 2 tables that are separated by a td cell with a large height specified so that you don't see the second table.

Both tables are exact duplicates except that table 1 has the show link, while table 2 has the content you want to show, and a hide link.

When you click the anchor tag, the email moves down to the position specified in your second table. As the content in both tables is the same except for the show/hide box visibility, you've created an illusion that the box is toggling.

If you have more than one show/hide box, you'll need to create more tables. The email will get really long, but the toggling effect still works in Outlook.

The anchor tags:

<a href="#section1">Click here to show content</a>
<a name="section1"></a>

Here's a quick example: http://jsfiddle.net/mjcookson/nq3Re/

Update to comment: Also, your email might not fill the entire viewport, so a gap between tables is used to avoid seeing the second table immediately after the first table.

Answer 2

You can't do that in Outlook. Its HTML email rendering engine is pretty bad. I have seen it done for the mobile webkit and android browsers.

See this article: http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/