Collapsible FAQs - HTML/CSS Help

Hey abenton , we use Stripo and it has an AMP block called "Accordion" which is probably what you want to achieve. Here's the code and I'll attach screenshots from the results below. 

<td align="left" class="esd-amp-accordion">
    <amp-accordion animate>
        <section>
            <h3 class="section-title">Can I cancel my membership?</h3>
            <div>
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tbody class="accordion">
                        <tr>
                            <td align="left" class="esd-block-text">
                                <p>Answer here</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <section>
            <h3 class="section-title">How to get a refund?</h3>
            <div>
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tbody class="accordion">
                        <tr>
                            <td align="left" class="esd-block-text">
                                <p>Answer here</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <section>
            <h3 class="section-title">Where to renew my subscription?</h3>
            <div>
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tbody class="accordion">
                        <tr>
                            <td align="left" class="esd-block-text">
                                <p>Answer here</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </amp-accordion>
</td>

Buuut as others have said, I highly doubt this will work across all email clients. So not sure if it's worth investing time in it...

This isn't my area of expertise, but I believe that this sort of thing, even if you could get it to work, would be very sensitive to the email client that displays it.

If you can afford for this to not work reliably/at all for many sorts of devices/recipients, then it might be doable, but otherwise maybe rethink.

Of course, stand to be proven wrong by someone 🙂

Hey abenton 

Adding bob's comments.

To my knowledge adding a collapsible menu of any kind is not a simple task, and even if was possible with CSS and Javascript, some email clients block Javascript for safety reasons, rendering the menu static. Outlook is not great with CSS either, so chances are it may not work with some of that crowd as well even if the Javascript did run.

I'd personally render them statically or if they are long and require drop downs you could refer readers to a website where CSS and Javascript will confidently run. 

I would personally love emails to become more dynamic but with the mess of email clients that currently exist that future doesn't look too bright.

Thanks all! I appreciate the insight. Seems like the best solution would be using an Accordion via AMP for email, but even that may not work as intended. Will follow up here if we find something that works! 

Hi Kristijan, this is super clever and good to keep in mind🔥

I had a dig into the AMP docs and there is a list of supported clients but it appears Outlook switched off their AMP integration in 2020 which is always a bit of a concern for me being such a big market.

Supported Email Platforms - amp.dev