[Code tutorial] implementing email marketing accordion menus

Email marketing accordion menus can be a lifesaver. newsletters can get long.

Really long.

Now, we don’t recommend sending a boat load of content to your subscribers. But we do understand sometimes you’re required to send a large amount of content.

The least you can do, though, is make it scannable for your mobile audience.

A two-or-three-column email layout may be readable and condensed on desktop. However, as it stacks the content into a single column for legibility on mobile devices, the email may start to feel infinitely long.

To assist your subscribers in quickly finding the content that interests them most, email marketing accordion menus will do the trick.

Essentially, an email marketing accordion menu is a mobile-only interactive element that allows a user to show or hide specific email content. The ability to hide content can save more than 50% of email height, creating a more succinct mobile experience.

Let’s explore the most common uses of accordions: housing navigation in a hamburger menu and hiding stories/products/etc. under section headers.

Hamburger Navigation

Using hamburger menus for header navigation ensures the primary content doesn’t get pushed down too far. It still offers front-and-center access to specific pages of your website.

There are several ways to code email marketing accordion menus.

Some involve JavaScript. Some require lines and lines of complex CSS code.

In this example, we wanted to create something simple to implement that would work on most mobile devices. In our research, this one-click solution fit best.

Here's an example of a hamburger menu for email marketing accordion menus.

Now on to the code:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OmmawR” default_tab=”html,result” user=”ktrane331″][/codepen_embed]

Content Accordion Menus

There are a LOT of nested tables and other styling elements in this example. But it basically follows the same technique as the navigation accordion menu.

In this example, we add two additional sections that contract when other sections are opened. This feature requires some additional IDs and accompanying CSS. It’s not too complex, though.

Content Email Marketing Accordion Menus

Here’s the code:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zwwMby” default_tab=”html,result” user=”ktrane331″][/codepen_embed]

Conclusion: Email Marketing Accordion Menus Save the Day

And there you have it! Those are our expert tips about why and how to implement email marketing accordion menus.

All in all, these design devices can make your email’s content so much easier to digest. And they’re not too tough to implement if you know a little code.

If you DON’T know code, but have dreams of using accordion menus… we can help. Just schedule a demo and our implementation team will be glad to help you.


More to explore…


Apple Mail Privacy Protection

What is Apple Mail Privacy Protection? Apple Mail Privacy Protection (MPP) is a feature available to Apple Mail users. MPP protects a user’s privacy by

Read More »

Media Manager upgrade

You may have noticed that your preferred browser provides a security warning for any mixed content. Recent changes in browsers such as Chrome, Firefox and

Read More »

Understanding DMARC

DMARC, or Domain-based Message Authentication, Reporting and Conformance, is an email authentication protocol that works alongside Sender Policy Framework (SPF) and DomainKeys Identified Mail (DKIM). What

Read More »

Ready to See WhatCounts in Action?

Take your first step towards supercharged engagement!

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy. We won't track your information when you visit our site. But in order to comply with your preferences, we'll have to use just one tiny cookie so that you're not asked to make this choice again.