This article details the Accordion Widget and how to manage it.
Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.
What is the Accordion Widget?
The Accordion Widget is a page widget that allows users to show or hide sections of content by clicking on their titles. This widget enables the presentation of large amounts of information in a compact and user-friendly manner, improving page readability and reducing scrolling, allowing users to quickly find the information they need without feeling overwhelmed by lengthy text blocks. It also offers flexibility in organizing content, allowing for logical grouping and prioritization of information.
Use cases
- FAQs: Directly addressing user needs for quick answers.
- Project updates and status reports: Providing concise summaries of ongoing projects with the ability to expand each project section for detailed updates, timelines, key milestones, and involved team members.
- IT support and troubleshooting guides: Offering self-service IT support by organizing common issues and solutions into an accordion. Users can quickly browse categories like "Password Reset," "Software Installation," or "Network Issues" and expand the relevant section for step-by-step instructions.
For more information about adding widgets to your page, please see this article.
How to set up the Accordion Widget within a Page
Once you’ve added the accordion widget to a section, you can get started with setting it up!
Adding content
- Title: Click the grey area of an accordion item to enter its title.
- Information: Click the white area below the title to input the item's content.
- Adding media and formatting: To insert images, videos, bullet points, lists, horizontal lines, or code, click the plus (+) icon that appears on the left side of the white content area.
Adding new accordion items
- Click the settings (gear) icon located at the top right of the accordion widget.
- Under Configure, select Add accordion item from the menu.
How to use the Accordion Widget
To use the accordion widget within an existing page:
- Locate a page where an accordion widget is used.
- Click on any of the accordion titles to collapse or expand them.
How to manage the Accordion Widget
To manage the accordion widget:
- Navigate the page group where the widget resides.
- Click the pencil icon at the top right of the page to open the page editor.
- Hover your mouse over the widget until it is highlighted in blue.
- Select the settings (gear) icon at the top right of the widget.
- A new window will open where you can adjust the widget's settings. You can switch between the Configure and Styles tabs to adjust what is displayed and how the content is displayed.
Configure
- Add accordion item – Click this button to add accordion items to the widget. You can add as many as you like.
- Remove accordion item – Hover your mouse over the accordion item you want to remove and click the red minus (-) icon that appears.
- Reorder accordion item – Hover your mouse over the accordion item you want to reorder and drag the item above or below another.
- Open first item by default – Toggle this option to expand the first accordion item by default.
Styles
- Header background – Adjust the color of the header background.
- Content background – Select the color of the content background.
- Padding – Adjust the amount of background visible behind the widget. You can set a value between 0px and 100px. A larger value will show more of the background, making the section header and content appear smaller. A smaller value will minimize the background visibility, making the widget appear larger. Adjust the slider to fine-tune the amount of padding.
- Border – Add a border around the widget. You can resize the border width, select the border direction (between 0px and 100px) and border color.
- Round corners – Round the corners of the widget between the values 0px and 100px. A larger value will make the widget corners appear rounder, whereas a lower value will make them appear sharper.
- Shadow – Enable a shadow effect for the widget. You can then select the shadow's darkness level: small, medium, or large.
More information about widgets
To read more about widgets and how to resize, copy, and delete them, please refer to this article.
FAQ
Is there a limit to the number of accordion items I can add to a single widget?
You can add as many accordion items to a single widget as you need. However, keep in mind that a large number of items might make the widget appear cluttered and could potentially slow down the loading speed of your page.