The accordion widget allows you to include information on a page within a collapsable menu, giving users control over which content they wish to view at a given time.
Adding the Accordion Widget to a Page
To add an accordion widget to a page or page template, edit the design of the page and drag the Accordion Widget from the widget library onto the page in the desired location. When editing a Page, the widget library can be found on the left sidebar. When editing a Page Template, the widget library can be found at the top of the page.
Click the wrench icon at the upper right of the accordion widget to configure its look and content.
From here, add a title, optional icons, and sections to the widget. Each section will represent one “fold” of the accordion widget, and within that section’s description you can add as much content as you like.
Create a link on your page so that when a user clicks, it opens a specified section of the accordion widget.
Prerequisites:
- An accordion widget, with titles included for each accordion.
- A content Area widget anywhere on the same page
In the HTML area of the Content Area widget, add the following HTML, replacing SECTIONTITLE with the title of the section you want to open:
<p><a href="#SECTIONTITLE" data-open-accordion="">ADD HYPERLINK TEXT HERE</a></p>
A specific example would be:
<p>Learn about <a href="#PianoAccordions" data-open-accordion="">Piano Accordions</a></p>
Note: The Section Title should one word in the HTML line, regardless of how it actually shows up. For example, an accordion title called Accordion A would be represented as AccordionA in the HTML.
