Is accordion possible on responsive HTML email?

Question

My client wants a responsive email in which text is not displayed at it's fullest but it's already embedded in the body of the email. When the user clicks on "click more" the text expands and all the text becomes visible. Is that possible?

As far as I know pseudo-classes are not possible on email clients, and building an accordion with inline coding is technically very difficult. Any ideas?

Answer 1

This is quite an old one but Matthew is right. You can't (rather shouldn't) try to make emails work using accordions, as these require either JS or advanced CSS3. Both of which have little or no support in email clients, even new ones.

The closest I was able to find when I had a similar request was using a CSS design from Responsive Email Patterns It works on some clients but not all of them.

Also, instead of using an Accordion, you could use "tabs" instead. This, although not 100% bulletproof, is supported by more clients. See here for an example.

(Following Leon's suggestion) Simply put, unless you aim at using simple CSS, you should really forget about responsiveness and complex interactions, other than adjusting widths and the like.

It's far simpler to either use anchors to link to full-article text from the top or use external links. Responsive emails are way overrated and bring too much complexity to something that people expect to be simple: reading an email.