mjml-accordion

[maximillianpowell]

I'm struggling to get the mjml-accordion component to work.

I've simply copied the HTML listed in the component documentation (https://mjml.io/try-it-live/components/accordion) as a test. It works fine in my ESP's WYSIWYG preview but upon sending test emails to various test accounts the accordion collapsing functionality doesn't appear to work in any situation. It just displays all the content within the blocks as if they've already been expanded and there is no functionality to minimise content blocks.

I've tested this in outlook on desktop browser and it presents me with the content already expanded with both up and down arrows showing and also visible checkboxes (see image). From reading the documentation it said there may be issues with it working on web clients.

However I've tried also tried the gmail, outlook and yahoo mobile apps on a OnePlus3 device and they all display the same albeit without the checkboxes. Screenshots attached.

[ngarnier]

Hi @maximillianpowell, what is your ESP? Seems like it's altering the HTML and breaking the responsive styles.

You can see here on Litmus that the results are different (especially arrows hidden and tabs unwrapped in email clients that don't support interactivity): https://litmus.com/checklist/emails/public/7a1d80d

If your ESP has an expert mode or enables to not inline styles, you should try it.

[maximillianpowell]

@ngarnier

I'm using Dotmailer, a UK ESP. I am in expert mode.

I've looked at the litmus report you provided and it seems to be reflective of what I am experiencing. I can't see any examples in the Litmus report where the functionality is working?

Would this not be supported on Android at all thus not showing the arrows?

The litmus report is also in line with what I am experiencing when testing to IPhones. It shows the arrows and containers in the "closed" mode but upon clicking on the arrows on the containers to expand them and show the content nothing happens.

[ngarnier]

No, Litmus only shows a screenshot of the result, so it's normal the interactions don't work in Litmus. On iPhones for example, it shows the tabs closed with the arrows because you can click on the arrows to unwrap the content (just not from Litmus).

I'm pretty sure Dotmailer is altering the HTML, can you try with something like https://putsmail.com/ (without inlining the styles). You'll see the functionality is working.

[benjaminsehl]

Accordion is working for me in the previewer, but when I send a test e-mail to myself it doesn't work. Nor when pasting HTML into mailchimp.

[ngarnier]

Mailchimp alters the HTML and breaks the style, see this issue for a fix: https://github.com/mjmlio/mjml/issues/717#issuecomment-308479096

About the test you send to yourself, can you please be more specific? It's impossible to help without more information, "doesn't work" is quite vague... Especially:

• how you send the test
• in which email client you're testing it
• what do you see / what would you expect...

[benjaminsehl]

Of course.

Sent the test using the MJML app. Testing in app "Spark" and in Gmail in Chrome. Testing other clients now.

Accordion is fully expanded, expecting it to open and close. Clicking on the labels/headlines does nothing.

Regarding the Mailchimp fix, is the answer to make sure I check off "Inline CSS" on Mailchimp, or keep it unchecked? In Mailchimp, I'm already doing "Code Your Own" and then pasting in the HTML directly from MJML, having tested checking off "Beautify HTML" and "Minify HTML" within MJML's settings.

[ngarnier]

Thanks for the details.

The fact that the accordion is fully expanded in Gmail is totally expected, as Gmail doesn't support click interactions (that's why we also hide the arrows). If we were displaying the arrows and showing the accordion wrapped, you wouldn't be able to unwrap it. You can see the detailed support for the email clients we specifically test on: https://mjml.io/compatibility/mj-accordion. We don't specifically test Spark Mail, but if it's showing the accordion unwrapped, there's a chance it doesn't support click interactions.

To fix the issue in Mailchimp, you should not inline the styles, that's what break the responsiveness.

[benjaminsehl]

So I now have the accordion functionality working as expected in Apple Mail when sent from MJML, which is great. However, I am still getting a fully-expanded version when sending the same HTML from Mailchimp — and in the settings I've made sure Automatic CSS Inliner is unchecked

[ngarnier]

Argh. I can suggest two things:

• compare the output before/after sending through Mailchimp with https://www.diffchecker.com/. It might help understand what they do exactly
• contact their support (maybe with the differences highlighted by diffchecker)

What do you think? Let us know!

[maximillianpowell]

Just thought I'd share some of my own testing.

Using Putsmail to send tests to eliminate possible amendments being made to code from my own ESP (although I couldn't see anything obviously different - it was difficult to check with a tool like diffcheck as they were laid out differently).

The functionality doesn't work in the apps for Yahoo Mail, Gmail (defualt android mail app) or Outlook. It also doesn't work in the desktop browser versions of Gmail or Outlook. However it does unexpectedly work in desktop browser Yahoo.

I'm just waiting for someone with a Iphone 7 to get back so I can test on iOS as well. I'll keep you updated.

I haven't yet tested some the desktop application of Outlook yet.

[ngarnier]

Thanks for the additional information @maximillianpowell.

As I said above, it's normal it "doesn't work" in Gmail and Yahoo Mail as they don't support click interactions, so the tabs will be unwrapped and the arrows hidden. It will be the same in Outlook, for the same reasons.

It works indeed in the Yahoo webmail as well as iOS Mail (and Apple Mail too for the record). I linked it previously but you might have missed it, here is the detail of how it behaves in major email clients: https://mjml.io/compatibility/mj-accordion

The accordion is following the principles of progressive enhancement (making the most of email clients enabling interactive functionalities while still offering a decent experience on the others), that's why it works in some email clients, but not all.

[maximillianpowell]

@ngarnier Apologies I didn't see the compatibility link previously. Thanks for your help. Love the work you're doing with this project.

[ngarnier]

No worries, thanks for the feedback!

Did you find a workaround to avoid Dotmailer breaking the template?