Skip to main content Skip to navigation

H5P Accordion

Once you have logged into the H5P website find the Create New Content button (it is usually on the Content tab of your account).

Add the name of your content to the Title field and then choose Accordion from the Select content type dropdown menu by clicking on the appropriate Use button.

Accordion screen shot

Add the Title text (this is what the user will click on to expand the accordion) and the Text content (this is what the user will see when the accordion expands). It is useful to have your content broken down into sections with associated content before you complete this section. Click on the Add Panel button to add more accordion sections and repeat this process adding titles and content until your accordion in complete.

Panel and text fields on H5P accordion

Choose whether you want to display all of your titles as headings or sub-headings. H2 will display the titles as headings and H3 will display them as sub-headings. Your choices will depend upon the format of your content and what you think looks best.

As you add content to the Text panels you will be able to edit it using the toolbar that appears - this gives you most of the basic functionality that you get in Word e.g. bullet points, italics, justification, colours and includes the ability to add hyperlinks.

Add any tags to the Tags section and choose whether you want to display the buttons listed below with your accordion. Personally I would leave all of the buttons checked as per the default settings as it gives both you and your users more flexibility. Then click on the Save button.

H5P tags and extra options screenshot

If you click on the Embed button at the bottom of the accordion once it has been generated, you can copy the HTML code and embed it into a web page just like this: