Accordion & Tabs

Accordions

The purpose of an accordion is to allow your content to be expanded and collapsed throughout the body of a page. In order to utilize this feature, you will first create text that has headers with text underneath. You can use any of the header options that are in the content editor drop down.

To begin, highlight the header text and then click on Formats. From the Formats drop down select the "accordiontrigger" option. You will notice that the text remains highlighted in gray with the action underneath.

Now let's move on to the text that is going to be expanded and contracted. Highlight that text and then click on the Formats dropdown a second time. Once there, you will select the option "accordiontext."

You will notice that the text appears highlighted in the content editor but will NOT appear highlighted on the live site. They are just markers indicating that the accordion functionality has been applied.

When you are done, save the page and view on the website to see your changes. You will notice each header is linkable and has a + and - sign to click on to view the accordion content.

Tabbed Content

Add the info you want in one tab into a section by going to CONTENT > SECTIONS > ADD A NEW SECTION

Add a link list with the tab titles you want by going to CONTENT > LINK LISTS (Tabs Example Below)

In the link list item description, add the slug of the corresponding section name. (Example: If my section is called Tab 1 Example then I would add the slug which is tab-1-example below)

Insert the monklet called "Section Monklet Tabs" and tell it which link list to display using an inline parameter. An example of this syntax would be section-monklet-tabs|find="tabs-example".