--- title: "AMP Accordion for Emails" slug: "new-editor-amp-accordion-for-emails" description: "Accordion allows your users to get an idea of the content at a glance and expand any section to view the full content. " tags: ["amp accordion", "amp for email"] updated: 2026-01-13T08:25:43Z published: 2026-01-13T08:25:43Z canonical: "academy.insiderone.com/new-editor-amp-accordion-for-emails" excludeFromSearch: true excludeFromExternalSearch: true --- > ## Documentation Index > Fetch the complete documentation index at: https://academy.insiderone.com/llms.txt > Use this file to discover all available pages before exploring further. # AMP Accordion for Emails > **Suggested readings**: [AMP for Emails](https://academy.useinsider.com/docs/new-editor-amp-for-emails), [AMP Sender Registration Form](https://academy.useinsider.com/docs/new-editor-amp-sender-registration-form), [AMP Carousel for Emails](https://academy.useinsider.com/docs/new-editor-amp-carousel-for-emails), [AMP Form for Emails](https://academy.useinsider.com/docs/new-editor-amp-form-for-emails) Accordion allows your users to get an idea of the content at a glance and expand any section to view the full content. This feature saves space in your emails by allowing your users, especially mobile users, to easily see your content without scrolling much. You can build AMP-accordions without opening the HTML code editor. You do not need coding skills or to add scripts to the email code. You can build these emails with the Drag and Drop editor. This guide answers the following questions with detailed instructions: - [How can I build the AMP accordion?](/docs/new-editor-amp-accordion-for-emails#build-amp-accordion) - [How can I preview the accordion?](/docs/new-editor-amp-accordion-for-emails#preview-the-accordion) ## Build AMP accordion To create an email with the AMP accordion as above, follow these steps: 1. Drag the AMP accordion block into your email template. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1767966953041.png) 2. In the **Settings** tab, you can add the needed number of sections to the accordion. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/2(21).png) 3. Give all sections' names. You can enter **up to 500** characters. Use the **Gap Between Sections** option to adjust the padding between sections for optimal spacing. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/3(14).png) 4. Enable the **Auto-collapsing** option to show one section at a time. When you open any other section, the previously opened one is closed. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/4(8).png) 5. If you want a specific section to be expanded by default, toggle the **Expanded** option so subscribers can see the content right away. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/5(11).png) 6. The **Animated opening** option is enabled to provide a smooth transition effect when opening and closing sections. Toggle it off if you prefer static opening and closing. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/6(14).png) 7. Switch to the **Styles** tab to customize the visual appearance of the accordion. - Adjust the f**o**nt of the section titles, including font size, color, and text style. - Modify the **alignment** of the titles and apply a **background color** to them for added emphasis. - You can also add an **icon** to the title of each section to enhance its appearance. - Customize the **border color** and **style** for each section to align with your design. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/7(9).png) ## Preview the accordion To preview your AMP email, you should get your sender whitelisted with Google. Once you complete designing your email, you can send a test message to your email address with the **Test Message** button on the Design or Launch step. ![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/image-1767985659671.png)![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%20at%20Jul%2004%2010-07-19.png) ## Keep in mind To make sure that your recipients see your AMP emails, you need to: - Get whitelisted with Google. - Fix all the bugs if any occur. The editor shows if you have any in emails and even recommends how to fix them. - You have fallbacks for those customers whose email clients do not support AMP for emails. - Make sure your ESP/CRM can send AMP emails. - Keep in mind that currently only Gmail (both the web and mobile apps on all OSs) and Mail.ru can render AMP emails. Yahoo will join the list soon. - AMP emails lose their AMP components if you forward them. ## Related - [AMP Carousel for Emails](/amp-carousel-for-emails.md) - [AMP Form for Emails](/amp-form-for-emails.md) - [AMP for Emails](/amp-for-emails.md) - [AMP Sender Registration Form](/amp-sender-registration-form.md)