The Problem

Email doesn’t allow for javascript or really much of anything for that matter. Which results in us slapping as much content in the email as possible without any sort of ability to interact with it.

The Solution

Leverage what we can use to gain the ability to hide and show content based on the user’s actions.

Use Cases

Display product options without making customer click to site Reveal FAQ answers with click, to shorten email length

How Does It Work?

We’re able to do this by leveraging input tags and CSS child selectors. We add an for each piece of content we want to show. We hide these elements and then use tags for each nav item. The label activates the when clicked. The CSS child selector allows us to change the display of the element after the .

Where Does it Work?

This solution works in clients that support webkit - Apple Mail, Mac Outlook, iOS native mail, Thunderbird, Android native mail. The fallback would vary based on email. For FAQs or a collapsible menu, we would default to show everything. For product options, we could hide the thumbnails, or show them and link directly to the website.

Built With

Share this project: