[Code Tutorial] Implementing Accordion Menus In Your Emails

On By - Design - Add Comment

Email newsletters can get long. Really long. Now, we don’t recommend sending a book-load of content to your subscribers, but we do understand that sometimes you are 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 look nice and condensed on desktop, but 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, an accordion will do the trick.

Essentially, an accordion is a mobile-only interactive element which allows the 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

Utilizing a hamburger accordion for an email’s header navigation is great way to ensure that the primary content does not get pushed down too far while still offering front-and-center access to specific pages of your website.

There are several ways to code 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 for what we wanted to share.

Hamburger Accordion

Now on to the code…


Content Accordion

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. In this example we add two additional sections that contract when other sections are opened. This feature requires some additional IDs and accompanying CSS, but nothing too complex.

Content Accordion

Now on to the code…


And there you have it! Any questions or thoughts? Leave us a note in the comments! Need assistance with tweaking your code? Let our implementation team help you out.

Share on LinkedIn11Tweet about this on TwitterShare on Facebook3Share on Google+0

free ebook download

Click Here To Download

Leave a Reply

Your email address will not be published. Required fields are marked *