Accordian List Widget in Composer 2

The Accordion List Widget is a versatile tool for displaying content in a compact, interactive format. Perfect for FAQs, schedules, product features, or content-heavy pages, it allows users to expand or collapse sections on demand. This keeps pages clean, improves usability, and enhances user experience.

Key Features

• Interactive Content Display: Each item expands or contracts with a click, helping visitors navigate long pages easily.

• Three Style Options: Choose from background colour, bordered, or underlined styles to match your page design.

• Customisation Options:

  • Background and text colours

  • Font style and size

  • Toggle icon design

  • Set each item to open or closed by default

• Optional Widget Integration: Enhance accordion items by adding:

  • Button

  • Countdown

  • Info button

  • Person

  • Group

  • Image

How to Add

1. Go to your page content area.

2. Click the Widget icon and select Accordion.

3. Add a title and content for each item.

4. (Optional) Insert additional widgets within each accordion item.

5. Choose whether each section should start open or closed.

6. Click Insert Widget to add more items as needed.

7. Save your changes and preview with View Page.

Tip: Use this widget to organise complex or lengthy content, making your pages scroll-friendly while maintaining consistent branding.

Watch the Video Demo:

Video Transcript:

The accordion widget is a great way to streamline a page with lots of content.

For example, an FAQ page. The content can be expanded and contracted on the click of a mouse.

There are three styles available in the platform.  Background color, bordered, and underlined. To set this up, please go to your page of content.

Click widget icon and then the accordion.

Each item must have a title and some content.

You could add opt optional widgets. These include a button, a countdown, info button, button group, and image.

You can also select whether this is open by default or not.

Add another one. Insert widget and save. Please click on the view button to view your page.

As we can see, this one is already open whereas this one is closed.

If you'd like to change the style, please go back into the widget and click on the settings tab.

This will allow you to choose stars one, two, or three. If you choose style one, you will then be able to select the color background.

You can also amend the text style and color and size.

The little toggle icon can also be changed. There are three stars to select, sizes, and colors and then save your page again.

We now have a different colour.