An accordion panel is used to collapse content under a group of headings on a page. This feature is often used for FAQs or describing steps in a process. When the page loads, all content is collapsed under its parent heading, when that heading is click the content is displayed, clicking on a heading for a second time will collapse the content. Note: you can only have one set of accordion panels on a page (don't set more than one content type to Accordion), if you do insert a second set of accordion panels, the second one will not function.
Here is an example in action.
Creating an Accordion Panel
- Click 'Edit' on the page you are adding an accordion to.
- Select the column you would like to make an accordion and set the column type to 'Accordion'.
Note: You can switch a type from editor to accordion, or vice versa, but you will lose any content you currently have in that block. Make sure you copy any necessary content before making that change. - After you make the accordion selection, your accordion options will load below. These options are formatted the same as content rows so it is important to pay attention to the text in the blue bar. Also note that there is a light dashed border that groups sections together, all of the sections of your accordion should be in one group.
- Click on the blue bar to expand the content fields for that section. Add your content to each accordion section.
- Adding, removing and re-ordering sections
- To add an accordion section, click on the green plus sign to the right of the blue bar.
- After you add a new section, more options will appear on the right next to the green plus. The first number tells you which number that row is in the order and the second number tells you the total number of rows.
- To remove an accordion section, click the red X to the right of the blue bar. This action will remove both the row and its contents. The only way to reverse that action is to discard your draft (there is no undo when you delete a row or a column).
- To reorder the accordion sections, use the black up and down arrows to put them in the order you would like. You may need to expand your content (by clicking on the blue bar) to be sure your content is moving the direction you would like.
- To add an accordion section, click on the green plus sign to the right of the blue bar.
- When you are finished, click 'Save & Preview'.
- Click 'Submit'.
As you are working on your accordion, make sure that you are adding multiple accordion sections to a single content row instead of creating multiple content rows. Below shows correct and incorrect examples of how it should look in your Cascade editor.
