CommonSpot: How to Add the Accordion Element

Learn how to add the Accordion element to your page. The purpose of this element is to display content in collapsible sections. When the accordion is closed, it displays green, when clicked open, it changes to orange.

Open the page you want to use an accordion element with. Note: make sure to be in author mode, View > Work on this Page.

-  Click on the Click to insert new element link.   

Click to insert new element link

- From the Element Gallery, choose to use the Find field to search for the element by name OR expand the UWP category and choose Programs Accordion Dropdown.

Element Gallery

- Click on the Programs Accordion Dropdown element action icon (gear), choose New Data. 

Accordion context menu - New Data
-  From the New Data window:

o   Enter the Accordion Title. *This is a visible field to site visitors, make sure to choose the best title heading for your content. 

o   Choose to check or leave unchecked the ‘default openoption.  *checking ‘default open’ means that collapsible section is always open.  You can manually close it, but it will default back to open when you make edits to your page.  It will also always be published open.  To keep your page tidy, its recommended not to check the box. 

o   Click Save.

- With the title bar collapsed (green), click the title bar area or triangle to expand and start adding content. By default the Formatted Text Block element is already present.  If needed, additional elements can be added using the click to insert new element link. 

Accordion element

*The PARC page is making great use of the Accordion elements as seen in the example below. 

Accordion example


 *See related KB articles - 'How to Use Rich Text Editor' and 'How to Edit a Page (Adding, Moving, and Deleting Elements)'.

Check out the How To video:

Keywords:CommonSpot, website, accordion, elements, accordion element   Doc ID:64426
Owner:Becky T.Group:UW Parkside
Created:2016-06-24 12:09 CDTUpdated:2017-08-15 15:05 CDT
Sites:UW Parkside
Feedback:  0   0