Reveal text

[PaulB]

We've all received emails with a joke or a riddle asking us to scroll down to reveal the punch line or answer. My wife got one today and wondered why these couldn't be handled with coding along the lines of the Lounge's spoiler tag.

I thought about this and told her that while I could see no reason why it could not be done, it was far beyond my limited HTML capabilities.

I'm intrigued. How would one format an email to contain, for example, the following:


Q: Why did the chicken cross the road?

A: <=== (answer revealed here by clicking on "A:")


Q: What is the meaning of Life?

A: <=== (answer revealed here by clicking on "A:")


Bonus or if you include coding to 'hide' the answer after the reveal!

[HansV]

Spoiler tags such as available in this forum use some kind of scripting, it's not pure HTML. For security reasons, scripting is disabled by Outlook. I don't know how other mail clients handle it, but it means that spoiler tags won't work for many recipients.

[PaulB]

I had a look at the source for a Lounge page containing a "Spoiler" tag. Waaay to complex for me to decipher!

But like I said above, I don't see why some (simple) combination of HTML and CSS cannot accomplish this, unless email clients can't accommodate the full gamut of HTML/CSS.

Attached is a snippet of a part of my locally stored 'home page'. These active links use very simple HTML/CSS to change the color of a link when I hover over it as with, in this case, 'Google'.

menu.JPG

Can what I describe above be all that different?

[HansV]

I have no idea how to include CSS in an e-mail message. Let's see if one of our web design experts knows how to do that.

[Jezza]

Paul

Here is a good resource to do it without javascript

http://www.pmob.co.uk/temp/hideandshow2-css.htm#nogo" onclick="window.open(this.href);return false;

[Kyle123]

The problem is how email clients handle CSS, this varies widely and makes designing newsletters and the suchlike difficult when you want a consistent look. A lot of CSS is stripped out or replaced in mail clients and they all do it differently, for example Outlook 2003 was happy to allow you to use css Classes, where as gmail strips these out. As a result most design for newsletters goes back to the dark ages of using tables for layout (this is a bit of a faux pas in web design today - the focus is on semantics - therefore tables should only be used for laying out tabular data) and in-line css (where the css is included in "style" tags, this must be repeated for every element, you can't use classes to roll the styles up and only write them once); there is also the problem that whilst mail clients may keep your css intact, they may not actually support all the css features in the email - in this case there would be no "reveal" you'd just see the text with no-scroll down.

Scroll downs are therefore used since they are easily implemented and cross mail client compliant - or at least the same effect will be created.

As for scripting in emails, that's a bit of a no-no - it is a potential security issue, therefore many clients will simply strip it out.

[PaulB]

Thanks, Jerry. Your link shows a good example of what I was looking for. But I really don't think there is an 'easy' solution to what I describe. That coding would have to be inserted into the HTML within an email. After looking at the source of a few HTML emails, I think I am really out of my element. As Hans and Kyle123 point out, there are a few other issues that may be insurmountable. Thank you all.