Home
Tool Panel

Accordion Widget

Accordion Widget

The Accordion Widget displays collapsible content sections. Each section has a header that can be clicked to expand or collapse its content. Use this widget to organize frequently asked questions, feature lists, or any content that benefits from a show/hide interaction.

Common Tasks

Adding the Widget to a Page

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Accordion Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.
  5. The widget will appear with default settings ready to configure.

Editing Widget Content

  1. Click the edit icon on the Accordion Widget.
  2. Enter a title in the Headline field to display above the accordion.

Managing Accordion Items

Each collapsible section is a separate Accordion Item child record.

  • Add a new section: In the advanced editor, navigate to the Accordion Items child records and add a new record. Enter a Heading (the clickable header) and Body content (the expandable content).
  • Edit a section: Open the Accordion Item record and modify the Heading or Body fields.
  • Reorder sections: Change the Sort Order value on each Accordion Item to control the display order.
  • Remove a section: Delete or deactivate the Accordion Item record.

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing around the accordion.
  • Choose a Theme Style to apply a predefined look.
  • Set a Background Image on the Background tab.
  • Enable As Full Bleed for edge-to-edge rendering.
  • Set a specific Height if needed.

Removing the Widget

  • Click the edit icon on the widget and open the advanced editor.
  • Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.

Edit Dialog Fields

Field Description
Active Enable or disable this accordion
Headline The title displayed above the accordion
Sort Order Controls the display order when multiple widgets are on the page

Advanced Edit Fields

Field Tab Description
Name Control Info Internal name for this widget
Pad Top Styles Add top padding to the widget
Pad Right Styles Add right padding to the widget
Pad Bottom Styles Add bottom padding to the widget
Pad Left Styles Add left padding to the widget
As Full Bleed Styles Include margins for content
Height Styles Set a specific height with units
Theme Style Styles Select a layout wrapper class from Design Block Themes
Button Style Styles CSS class for buttons (default: "btn btn-link")
Background Image Background Set a background image for the widget

Child Records: Accordion Items

Each accordion section is a separate Accordion Item record with these fields:

Field Description
Heading The clickable header text for this section
Body The content displayed when the section is expanded (HTML)
Sort Order Controls the display order of sections within the accordion