A Zipper consists of a main introductory area followed by a series of "Panels." Each panel acts as a drawer that holds specific content, keeping the overall page length manageable while still providing deep technical or secondary information.
Structure of a Zipper
The Zipper paragraph is broken down into two main parts:
- Headline & Body: Use these fields to provide an overview of the topic before the user interacts with the accordion panels.
- Panels: These are the individual rows of the accordion. Each panel is a Header/Body pair:
- Panel Title: This serves as the clickable header. It should be concise and clearly describe what is inside.
- Panel Content: The text or media that is revealed when the user clicks the plus (+) icon or the title.
Best Practices for Scannability
While Zippers are great for saving space, they can sometimes "hide" important information from users who are quickly skimming a page.
- Avoid Hiding Critical Info: Information that is essential for every user to see—such as a primary deadline or a main call to action—should remain in the main Body text, not tucked away in a collapsed panel.
- Use Descriptive Titles: Since the content is hidden by default, your Panel Titles must do the heavy lifting. A user should know exactly what they will find inside before they click.
- Keep it Organized: Use Zippers for Frequently Asked Questions (FAQs), detailed policy documentation, or secondary resource lists where a user is likely looking for one specific answer among many.
How to Add a Zipper
- In the Paragraphs section of your page, select Add Zipper.
- Provide an overall Headline and Body text to introduce the section.
- Under the Panels section, click Add new panel.
- Enter the Title for your first panel (this will be the visible header).
- Enter the detailed information in the Body field of the panel.
- Click Create Zipper Panel (or Update) to save that item.
- Repeat to add as many panels as necessary to complete your accordion.