Accordion Tutorial
The Accordion content type allows users to add accessible accordions to their sites. The accordion is fully responsive and works great on smaller screens as well as on desktops.
In this tutorial, you will learn:
- When to use the Accordion content type
- How to create an Accordion content
Click the "Get started" button to explore all of the possible ways to use H5P!
Video tutorial
The below video shows how Accordion may be used and how to use it:
Textual tutorial - Example
Below is the Accordion which we are going to create in this tutorial:
When to use the Accordion
The Accordion content type can be used for presenting text when there is a limited amount of vertical space. The content inside Accordion is shown in collapsible panels with a title. Each panel expands by clicking on the title.
Step 1: Topic
The topic is berries. In this tutorial, we are going to create the Accordion mentioned in the above example with four types of berries.
Step 2: Creating an Accordion
Select the New content option and choose Accordion from the list of Content types:
Step 3: Accordion Editor
The Accordion editor should now appear and it looks like this:
Step 4: Title
Type the following text in the Title field: Types of berries
Step 5: Panels
Here, we'll add the panels that the Accordion consists of. We'll add four panels.
- Cherries
- Cranberries
- Blackberries and
- Açaí berries
Panel 1:
The 1st panel is added by default. It consists of a title and text. Fill in:
Title: Cherries
Text: As raw fruit, sweet cherries provide little nutrient content per 100 g serving. Dietary fiber and vitamin C are present in the most significant content while other vitamins and dietary minerals each supply less than 10% of the Daily Value per serving, respectively. Source: Wikipedia
Add new panel using the "Add panel" button. Fill in the next three panels with the following:
Panel 2:
Title: Cranberries
Text: Raw cranberries have moderate levels of vitamin C, dietary fiber and the essential dietary mineral, manganese, as well as other essential micronutrients in minor amounts. Source: Wikipedia
Panel 3:
Title: Blackberries
Text: American cultivated blackberries are notable for their significant contents of dietary fiber, vitamin C, and vitamin K. Source: Wikipedia
Panel 4:
Title: Açaí berries
Text: A powdered preparation of freeze-dried açaí fruit pulp and skin was reported to contain 533.9 calories, 52.2 g carbohydrates, 8.1 g protein, and 32.5 g total fat. The carbohydrate portion included 44.2 g of dietary fiber and low sugar value. Source: Wikipedia
Step 6: Finishing up
Save the node/article to view your finished Accordion.
You should now have a similar result as the example at the top of this page.
Feel free to leave any comments or suggestions on how to improve this tutorial.
Comments
rdiane1
Sun, 09/29/2019 - 00:15
Permalink
Is there any way to embed
BV52
Mon, 09/30/2019 - 19:44
Permalink
Hi rdiane1,You can use all
Hi rdiane1,
You can use all the contents available in H5P.org in Moodle. All you need to do is install the plugin, you can read more about this here. However the content will behave the same way. I would suggest that you use Column instead, it shows all the contents at the same time without having click anything.
-BV52
treece2122
Fri, 10/18/2019 - 23:55
Permalink
Images in Accordion?
Is there a way to include images in an accordion object? Thanks!
BV52
Mon, 10/21/2019 - 18:55
Permalink
Hi treece2122,I'm afraid this
Hi treece2122,
I'm afraid this is not possible yet but Otacke one of our community members has created code for this to happen. It just needs to be reviewed by the core team and once it has been approved it will be added as a feature. You can follow the progress of the request here.
-BV52
CGerman
Wed, 09/08/2021 - 19:50
Permalink
Images in Accordion
Can this be done yet?
CGerman
Wed, 09/08/2021 - 19:51
Permalink
Accordion
Is there code for adding images?
BV52
Thu, 09/09/2021 - 18:40
Permalink
Hi treece2122,I'm afraid this
Hi treece2122,
I'm afraid this is not yep possible. The proposed changes from Oliver has not been reviewed and tested by the developers in the H5P core team.
-BV
Alexandra Marxsen
Wed, 02/19/2020 - 22:34
Permalink
My.PBWorks.com
Is it possible to include h5p into my.pbworks.com? How can I invite people to h5p contents?#
BV52
Thu, 02/20/2020 - 17:21
Permalink
Hi Alexandra,If pbworks
Hi Alexandra,
If pbworks provides a place to enter HTML codes and allows embedding of iFrames it should be possible by using the embed feature of H5P.
-BV
Morefish
Tue, 03/10/2020 - 14:47
Permalink
Hi! Can I add an Accordion
Hi! Can I add an Accordion into a Course Presentation?
best wishes Helen
BV52
Tue, 03/10/2020 - 17:23
Permalink
Hi Helen,H5P is open source
Hi Helen,
H5P is open source so anyone with developer experience can make the changes. You can read more about this here.
-BV
IngridGamboa
Thu, 09/10/2020 - 08:19
Permalink
Acordeón
Me parece una herramienta interesante. No puse bien al título del acordeón y cuando traté de editarlo no me dejó. Vere como funciona. Gracias por la oportunidad de usarlo.
luke_jaeger
Wed, 12/02/2020 - 17:50
Permalink
searchable text in accordion?
I made this lovely FAQ page with H5P accordion but can't search the accordion text with the WP search widget. Is there a fix for this? thanks!
Funancolong
Sat, 12/26/2020 - 15:37
Permalink
desarrollo de un recurso
hola los recursos para moodle son hechos directamente en la plataforma moodle o puedo hacerlos por medio de esta pagina y luego inscrustralos en moodle ?
BV52
Mon, 12/28/2020 - 17:10
Permalink
Hi Funancolong,"development
Hi Funancolong,
"development of a resource
hello the resources for moodle are made directly in the platform moodle or I can do them through this page and then register them in moodle?"
It's better to create them Moodle using the free plugin. H5P.org is a test site and should not be used to host "real" contents. It has limited content types available as well as limited functions (i.e. scores are not recorder, no control who accesses the content etc.)
-BV
Funancolong
Wed, 12/30/2020 - 14:25
Permalink
desarrollo de un recurso
entiendo, este proceso es gratis? tendre mi contenido para mi ,podre descargarlo y montar en otro curso?
feliz dia.
BV52
Wed, 12/30/2020 - 17:45
Permalink
Hi Funancolong,"development
Hi Funancolong,
"development of a resource
I understand, is this process free? I will have my content for myself, can I download it and mount it in another course?
Happy day."
Yes this is free and you can download and use the content types wherever you like.
-BV
chubuteduca@gma...
Wed, 01/06/2021 - 15:10
Permalink
Donde consigo el código
Una vez que finalizo en la prueba el ACORDEON, por ejemplo, de dónde saco el código para incrustar?
BV52
Wed, 01/06/2021 - 17:55
Permalink
Hi,"Where do i get the
Hi,
"Where do i get the code
Once I finish the ACCORDION test, for example, where do I get the code to embed?"
You should see at the bottom of the content a button that says "embed", this provides the code for embedding contents.
-BV
TNABDG
Tue, 03/30/2021 - 11:36
Permalink
Accessibility issues
A web accessibility audit on our Moodle course revealed two areas where the accordion controls do not comply with WCAG: content is not keyboard accessible and expanding controls do not have appropriate name/role/value. The audit said that keyboard users won't recognise the expanding accordion controls as tabs and are unlikely to intuitively use the arrow keys to navigate them. Each accordion control should be left in the tab order and the user should be able to press Space key or Enter key to open them. Focus should then move to the expanded content. This will make the controls more intuitive to people who are unable to see them. Could you address these issues? Thank you.
BV52
Wed, 03/31/2021 - 20:55
Permalink
Hi TNABDG,Thank you for
Hi TNABDG,
Thank you for reporting this. I have informed the H5P core team and you can follow the progress here.
-BV
TNABDG
Mon, 12/06/2021 - 09:37
Permalink
When will accessibility issues be addressed?
My post in March was logged in the project log (HFP-3245), but nothing has been done, which is disappointing: [HFP-3245] Accordion - Keyboard Navigation Issue - H5P's Jira (atlassian.net). Any idea when these issues will be deal with? Thank you.
mehmet ibrahim ...
Sun, 05/30/2021 - 06:54
Permalink
H5P DRAG AND DROP İN ACCORDION
Hi there
Is it possible to add H5P drag and drop task in to accordion?
BV52
Mon, 05/31/2021 - 18:33
Permalink
Hi Mehmet,Not as of the
Hi Mehmet,
Not as of the moment. However once this PR has been accepted, merged and released it will be possible to create Drag and Drop in Accordion.
-BV
mehmet ibrahim ...
Wed, 06/02/2021 - 11:07
Permalink
H5P DRAG AND DROP İN ACCORDION
When I create 5-6 drag and drop task and paste their short codes in the same page, it takes some time to open the page. page loading time increase. I thought that if I insert short codes in to accordion , users will open one by one. I hope it will be done in a short time.
Funancolong
Thu, 03/17/2022 - 23:49
Permalink
h5p no carga video interactivo
que tal no puedo usar h5p en moodle se queda cargando y no pasa nada ayuda por favor .
BV52
Fri, 03/18/2022 - 17:18
Permalink
Hi Funancolong,Please repost
Hi Funancolong,
Please repost your question/concern in the forums. Please make sure that you provide all the information that is requested. Also I would suggest that you post your question in English, this will help those that want to help but do not speak Spanish.
-BV
Lucy Walton
Tue, 10/18/2022 - 04:40
Permalink
Accordion as a checklist
Would you be able to create a Checklist version of the Accordion, or another template that users can use to check off tasks as they are completed?
BV52
Tue, 10/18/2022 - 18:35
Permalink
Hi Lucy,The closest is
Hi Lucy,
The closest is Multiple Choice Question, configured specifically to always have a perfect score. Below are the steps to do this:
I created a simple content here.
-BV
LeaAnne Bethany
Tue, 03/07/2023 - 18:24
Permalink
Is there a way to go to a 3rd level in accordians
Is there are a way to do a 3rd level in an accordian? I see the H2, H3, H4 marks but can't seem to figure out how that works or applies.
Thanks,
LeaAnne
Caitlyn Conley
Tue, 04/25/2023 - 22:58
Permalink
tables in Accordion?
Hi,
Is it possible to add a table in an Accordian section?
Thanks,
Caity
murphybridget
Fri, 09/29/2023 - 12:01
Permalink
Wonderful tutorial.
Wonderful tutorial.