Technology Enhanced Learning Team

Articles menu

H5P Accordion – more than a space saver

20 April 2023 Posted in: Articles Tagged: By: John Seamons

The effective presentation of material is an important consideration when designing or redesigning any QMplus site. While updating a self directed course in Moodle I have explored a number of inbuilt features of QMplus to make the content as engaging as possible. I have really benefited from using Accordion which is part of the H5P plugin. H5P is a powerful tool which enables staff to create interactive content, it is designed to be straightforward to use and share. It offers staff the ability to make a wide range of interactive resources within QMplus ranging from crosswords to collages of images and interactive books.

I have explored several H5P content types but the one which I have found most useful for displaying information is Accordion. Accordion is a dynamic and interactive tool which presents information in a structured and visually appealing manner as vertically stacked expandable items.

In Accordion:

  • Content such as text or links can be added into separate sections called panels.
  • Each panel has its own unique title which enables you to divide information into topics.
  • The panels stack on top of each other with the titles on display, users click on each title to expand it revealing the content within.
  • Only one section at a time can be selected which encourages users to focus on a particular part.

Below is  a real-life example of an Accordion that I have built:

  • I took this text from within a section of a QMplus site and added it to an Accordion.

  • In the screen recording below you can see how the above content appears in the Accordion. I demonstrate opening and closing each of the panels to reveal the content in each.
  • I was very pleased with the outcome. It has saved space and the sections are well organised.
  • The topics format in QMplus similarly includes collapsible sections which can have individual titles. However sections are designed to contain a range of resources and activities as well as a description. This is different to the Accordion which provides structure to text and helps prevent QMplus sites being too cluttered.

There are specific benefits of using the Accordion these include:

  • It improves the appearance of QMplus modules.
  • Saves space when there is a large amount of text.
  • Content can be divided into smaller sections enabling learners to navigate through effortlessly.

Benefits of  Accordion and all H5P content types:

  • They can be used across multiple QMplus modules.
  • H5P content can be used on any site compatible with H5P such as a WordPress site.
  • You can create resources by the content bank or activity picker.
  • The content bank offers a central place to find all your H5P creations.
  • They can be embedded directly within a label or section.
  • It can be downloaded and saved on a device for future use or shared with colleagues. Users could consider saving a copy in a shared location such as a hidden folder in QMplus.
  • They can be used for a range of different purposes such as summarizing key concepts, providing additional resources or structuring step-by-step instructions.

Points to consider when working with Accordion in QMplus:

  • If you create an Accordion using the activity picker it is not automatically stored in the content bank. You would need to download it and reupload it to the content bank.
  • In the current version of QMplus 3.9 there seems to be a limit to the amount of information you can put into a panel. In the below example I had added too much content to the first two panels which meant the third was not visible. I resolved the issue by creating additional panels with less content.
  • Please note that we are soon upgrading to the 4.1 version of QMplus, and we hope it will resolve the issue with the amount of content in sections.


I recommend that you explore all content types in H5P and especially Accordion. Please check out the following TELT Guide  Creating interactive activities with H5P | Technology Enhanced Learning Team (

Thank you for reading.

If you would like to read other similar articles please go to QMplus- good to know | Technology Enhanced Learning Team (

Return to top