UWA Sitecore Further Learning SeriesThe Accordion Module

We're going to have a look at the accordion module. Specifically we're going to have a look at some examples of where this module is being used. We're going to look at creating some accordion items. We're then going to create an accordion module and incorporate those items and then we're going to place the accordion module on a page.

Some sample accordions

Accordions make a page that would otherwise be very long much more manageable and easy to navigate, like here with the Agents Portal where we've used an accordion to break it down into forms where we have some PDFs.

https://study.uwa.edu.au/for-agents

Or like here on the Open Day website where we've used an accordion to break out the various different hubs and the activities that are happening there.

https://study.uwa.edu.au/openday/Explore-your-interests

Creating some accordion items

The accordion items live under the site data folder, under modules, underneath the accordion folder. We right click under items and click insert and choose "Accordion item folder". It's important to organise all your different accordion elements into folders to make them easy to manage as your site grows.

We'll call this folder "Explorer your interest", click OK. Now we're going to add some accordion items, so right-click, click insert, choose accordion item, give your accordion item a name and click OK. Now we're going to add some content into the editor, so just add your content. Click accept and save.

We're going to now create another accordion item so right-click again. Insert accordion item. Give this one a name. And again we're going to show the editor and paste in some content. As in our example with the Agents Portal you can add all sorts of different content into these accordion items, like PDFs, lists of links, free text that kind of thing.

Creating an accordion module

We're now going to create the accordion module which allows us to pull together the various accordion items and then insert them onto a page. So we go to the modules folder, right-click, choose insert. And we create an accordion module folder like we did for the accordion module items. Give it a name. Choose the module folder, right click. Insert accordion module. Give it a name and click OK.

The accordion module allows us to decide which accordion items we want to display on the page. We're going to choose both the items we've just created.

We can also add an accordion heading and an accordion subheading.

You'll see where these are used when we place this module on the page shortly. Click accept and save.

Placing the accordion module on a page

In order to place the module on a page you have to use the experience editor. So navigate to the page that you want to include the accordion on, in this case "Explore your interests" under Open Day.

Choose experience editor from the publish menu in the ribbon and wait for the experience editor to load.

Next up we need to lock the page for editing.

And we choose the insert module icon.

Scroll down and click "add here", choose accordion. Press select.

And browse to the accordion module. And choose OK.

You now need to save, approve and publish.

And finally we're going to preview by expanding the ribbon and choosing "Other" then "Preview". Scroll down and test the accordion items.

…and they should be working fine.