Creating Accordions Using the WYSIWYG

 Video Transcript

The accordion feature adds a collapsible container that opens and closes when a user clicks on it. Accordions are great for sorting content into categories and shortening long pages.

There are two ways to add an accordion to a page, and they differ slightly in functionality: as an accordion row to your rows and cards (tutorial coming soon) and to the body field of a basic page or basic card using the WYISWYG button.

Follow the instructions below to add an accordion to your page or basic card using the WYSIWYG.

Step 1: Position your Cursor

Edit your page and navigate to either the basic page body field or a basic card.

Place your cursor in the body field of the page or basic card where you want the accordion(s) to appear.

Step 2: Click the Add Accordion Button

The Add Accordion button is in the WYSIWYG toolbar. By default, the system will add two accordions.

Step 3: (As Needed) Add or Remove Additional Accordions

Right click a section of the accordions to add a new accordion before or after where you clicked.

You can also choose remove accordions that are not needed.

Step 4: Fill in the Accordion Title and Content

The Accordion Title field corresponds to the portion of the accordion that users see and click on. The Accordion Content field is what users see when the accordion expands.

Pro Tip: Be careful removing the Accordion Title text; it is easy to delete the whole field, which will break  your accordion. Carefully highlight the example text with your cursor, then start typing in a new title.

Step 5: (Optional) Change the Accordion Title Colors

By default, the accordions will be dark blue. To change the colors, simply highlight the accordion title and choose a different color using the Background Color button in the WYISWYG.

Step 6: Save your Changes

When you are finished, click Save to save your changes.

Your accordion should now be successfully added to your page.