Blended Learning Help Site Banner

H5P Interactives

Creat fun and simple online interactive learning activities

The H5P Accordion Tool

The Accordion is a useful tool to present content on a nested format. It allows the user to view content easily without having to scroll and is a useful way of providing a summary of information whilst still allowing the user to drill down to more detailed information on the topic.

The accordion has good WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) coverage making it easier for people with vision difficulties using screen readers.

For instructions on how to locate and insert H5P Learning Objects, please see Inserting H5P in VU Collaborate.

Step One: Create H5P Accordion

1. In the Learning Space, choose the module you want the H5P to be in, click on New then New Document.

new new documentv1 

2. In the Insert Stuff menu, click to open the H5P Learning Object

insert stuff icon in the HTML editor 

insert H5P learning object 

3. In the H5P tool, click Add Content

add content 2

4. Select Accordion in the Content Type dropdown menu.

The Accordion is an expandable menu that works well when you have a list of learning resource links such as different articles, audio and/or video files. 

select accordion

Note: Below is a demonstration of the Accordion tool explaining the flags used in Formula 1 Racing: 

detail use

5. Add a Title for the Accordion.

6. In the Panels section, add the first Title or menu link, and body Text. In the Text field, you can add a text description, links and images. You can edit these at any time. 

ACC Title

7. To add another item to the accordion, click the Add panel button.


Note: Changing the title size for the labels does not change the size of the labels, only the text. 

Step Two: Preview and Publish Accordion

At the bottom of the screen you can adjust your H5P's settings (you can leave these settings by default or make alterations):

1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.

2 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.

3 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is. 

4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P's. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P's, then you can use the search field to locate another staff member by typing in their full name. 

5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example 'Arts and Education', select your College.

Note: To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.

6 - Send Score to LMS: (previously 'Send to Gradebook') In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook. 

title new h5p

After adjusting your H5P object, you can click Save and Insert or Save

1. Click Save and Insert. A preview of the Accordion will appear.

Accordion save and insert

2. The H5P object is now ready to add to your space. Click Insert to add the Accordion to the document.


3. Alternatively, you can click Save.

h5p save

4. Then click Insert.

h5p insert

Further Support

Visit the VU Collaborate Help site at for up to date information and resources on blended learning or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Contact ITS Service Desk on (03) 9919 2777 or via self-service for further technical support.

Admin Only