Accordion Widget

This article details how to install, use and customize the Accordion Widget

What is the Accordion Widget?

The Accordion Widget is a custom widget that enables you to create expandable and collapsible headers with body texts in Happeo’s Pages. 

This widget is available to be installed via Happeo’s App Marketplace (see this article for more information about the App Marketplace).

How to install and uninstall the Accordion Widget

Installing the Accordion Widget

As an administrator, to install the Accordion Widget:

  1. Navigate to the Admin panel and click on Apps on the side-bar
  2. Scroll down to All Apps where you can find the Accordion Widget and click on it
  3. Click on Add to Happeo at the top right corner of the page
  4. If the installation was successful, you will receive a confirmation notification stating that the app was installed at the bottom left corner of the page

Uninstalling the Accordion Widget

To uninstall the Accordion Widget, please see this article and scroll down to “Uninstall a Marketplace App” for instructions. 

Creating and customizing an Accordion Widget

Creating an Accordion Widget

To use the Accordion Widget, first, create or navigate to a Page group and create a section

Then, select Add widget and click on Accordion Widget under your platform’s name. 

You will then be provided with a header item and its body text where you can type in whatever information you wish the widget to contain. In the example below, the dark grey field is for headers whereas the light-grey field is for the body texts. 

You can also add a widget header title if you like.

Customizing an Accordion Widget

To customize the font styles, sizes, colors, etc., you can double click on any piece of text in either the header or body text fields. 

To add a new item, simply click on New item at the bottom of the widget.

If you want to customize the background color of the headers, you can do so by clicking on the colored box next to Header background color in the widget settings or by typing in a color code.

You can also customize the content background color in the widget settings by clicking on the colored box next to Content background color in the widget settings or by typing in a color code.

From the widget settings, you can also duplicate the widget which will copy the widget below the existing one as a new section. 

To delete an item, simply click on the trashcan icon next to the item on the right. 

Note: Deleted items are permanently deleted and not archived, so please be careful!

Once everything looks good, please make sure to save your changes