PageBuilder - Accordion Component

PageBuilder’s Accordion Component helps you build dynamic informational pages right in the Miva admin. It’s a great component to use for things like Frequently Asked Questions sections on your website.

Using the Accordion Component

In the Miva admin, navigate to the PageBuilder interface, User Interface>Content Management and then select the page you want to add the component to.

Click the Add Component icon in the Component Pane, and select Accordion from the component list.

Rename the Component Name as desired.

Properties: Section Title

Here you can give the Accordion section a title, and select the desired alignment. In the example below, we named the section “Frequently Asked Questions.”

Properties: Accordion

The Accordion section is where you will enter the questions and answers for your FAQ.

Click the first Detail section in the list. In the Heading section you ask the question. The Content section is where you provide the answer to the question. This text field is Markdown capable. For information on this ability, visit the PageBuilder Markdown Authoring document. You can also set this particular question and answer to expand by default by clicking the box.

You can add questions and answer pairs by clicking Add Detail in the Accordion section, and you can remove pairs by clicking the X to the right. In addition, you can reorder the pairs by clicking and holding the six dots next to each question, and dragging it to the desired location.

Properties: Styles

There are several settings in the Styles section to alter the look of the Accordion.

Accordion: This adjusts the spacing between each pair from Small, Medium and Large.

Heading: Allows you to adjust the font style, family, size, weight and color of the displayed questions.

Content: Allows you to adjust the font style, family, size, weight and color of the displayed answers.

Icon: If toggled on, this establishes the kind of icon that indicates the question pairs are expandable, and sets the location of where that icon will appear.

Border: If toggled on, this puts a border either around, or under the question, establishes the color of the line and allows you to set the width of the line.

Advanced: Spacing

This section is where you set the spacing of the Accordion Component from the page elements above and below it. It is set in pixels.

Advanced: Display Settings

The Display Settings section sets two things. First is the Initial Display. This sets what the accordion will look like when a shopper sees it for the first time on the page. It can be set to Collapse All or Expand All.

The second setting establishes how many of the accordion fields can be open at one time. The settings are One, or Multiple.

When finished setting up the Accordion, click the Save button.