You are here

Accordion Menu

Accordion menus are another interactive way to display information. Tabs will appear stacked, but when you click on one, the box will expand (like an accordion) and display a picture, links, and more text. You can include a maximum of 5 tabs. Just like with other features, you will want to use the accordion menu sparingly to maintain effectiveness. You do not need to submit these photos to Communication and Marketing. You will need to size your photos to 165 pixels x 110 pixels. To do this, you can use an editing program such as Sumo Paint (available for free at www.sumopaint.com) or Adobe Photoshop.

Part one: Creating the accordion menu

1. In the admin toolbar, hover your cursor over Content.
2. Pull your cursor down, and place it over Add content.
3. Click on Accordion Menu (Block).
4. The text you enter in the Title box will display above the menu.
5. The Tab Title should be short and specific.
6. Enter your Tab Body text and include hyperlinks to pertinent information.

7. If desired, you can include a link below your text instead of hyperlinking information. To do this, add a link title (i.e. More Info) and URL in the Tab Link section.
8. Click on Select media to locate your image.
9. Click Browse and locate the image on your computer.
10. Click Open.
11. Click Submit.
12. Click Save.
13. Click on Add another item to add another tab. Repeat this process until you have created your desired number of tabs (maximum of five).
14. Click Save.

Part two: Adding the accordion menu to your page

1. In the admin toolbar, hover your cursor over Structure.
2. Pull your cursor down, and click on Blocks.
3. Scroll down until you see the accordion menu that you created.
4. Click on Configure.
5. Type “” in the Block title box.
6. Scroll down to Ragin Cajun Sub-Site Theme (default theme) and click the drop down arrow.
7. Select Sidebar Second.
8. Select your preferences under the Show block on specific pages.
a. The home page is “.”
b. A main link page would be “content/nameofthepage.”
c. Putting “*” after the name of a page will include any of the subpages in that page.
For example if you didn’t want the picture to show on About Us or any of its subpages, you would click the radial button (dot) next to “All pages except those listed” and type “content/about-us*” in the box.
9. Click Save block.

Editing the accordion menu

1. Click on the sprocket icon in the top right corner of the menu.
2. Select Edit.

3. Delete, add, edit, and reorder tabs as desired.
4. Click Save.

Video Tutorial