background image

Accordions

These are special page utilities that allow you to add lots of content onto a page without making the page too long. Each panel of content is contained within a tab (like the example below) and the first tab appears expanded when the page is first opened. Clicking on any other tab will then close the first tab and open the selected tab. This is why the are called 'Accordions', because of the way they expand.

These utilities are so useful that we have used them throughout this support website, and they help to make the content easier to read and follow.

The advantage of Accordions is that the tabs are wider, so you can insert a longer title into each tab (as we have done here).

Adding an Accordion into your web page is easy. Just click on the tabs below to see each step.

Add a WYSIWYG section for each tab

You can create as many accordion tabs as you like, so the first step is to add multiple wysiwyg sections to your page, one for each tab you need, and set the block type to 'Hidden'. You can always add extra wysiwyg sections later if you need more tabs.

1: Click the Manage Sections link in the editor and add a wysiwyg section for each tab you need.

2: Set each Block type to 'Hidden' (the first section should be left as type 'Main page').

Add tab sections

Enter the tab content into each section

Enter whatever content you want into each of the wysiwyg sections that are to be used for the content in each accordion tab. Remember that the first section will contain the content that is NOT in the accordion, so make sure you only use the sections after the first one.

You can see from the screen shot below that this page has FOUR wysiwyg sections.
The first section contains the text that appears above the accordion and the popit accordion code, and the other three sections contain the text and content that are within each accordion tab on this page.

showing this page as it appears in the page editor

Insert the Popit Accordion Code

Once you have added the content for each accordion tab into the appropriate sections you can now insert the special accordion popit code into the first section. This is the code that tells the page to display the other sections within an accordion.

The accordion popit code used in this page looks like this...

[[AV:sid=265-Add a WYSIWYG section for each tab,266-Enter the tab content into each section,267-Insert the Popit Accordion Code]]

The accordion code (which is always enclosed within square brackets) starts with AV
The next parameter after the colon is sid= which stands for Section ID
The number 265 is the Section ID of the first wysiwyg section that contains the content of the first accordion tab.
The text after the hyphen is the title of that tab.
Each tab (section ID & title) is separated with a comma.

Here you can see the accordion code as it appears in the page editor on this page.

accordion popit code as it has been added to the page editor