A free HTML5 based accordion content type allowing users to add accessible wai aria enabled accordions in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.
Would you like to create content like this on your own?Get started
Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.
Reduce the amount of text presented to readers by using this responsive accordion. Readers decide which headlines to take a closer look at by expanding the title. Excellent for providing an overview with optional in-depth explanations.
- Add title and text for each expandable item.
- You can define whether you want to use H2, H3 or H4 tags for titles.
- Rich formatting can be used for the expanded text.
Learn how to create Accordion in this tutorial.
New to H5P? Read the installation guide to get H5P on your own site.
Tue, 06/28/2016 - 14:44
Are you likely to develop this further by allowing the input of images/video in the expanded box?
Tue, 06/28/2016 - 19:17
Yes, that is quite likely :)
Yes, that is quite likely :)
Thu, 03/09/2017 - 20:06
Wondering if you have an idea
Wondering if you have an idea about timeline in terms of when the ability to add images and videos could be integrated. Very excited about using that functionality when it's available!
Fri, 03/10/2017 - 09:24
Hi Jessie, no ETA yet. It's
Hi Jessie, no ETA yet. It's an open problem. If a developer from the community wants to pick this up, we'll integrate it asap :)
Thu, 03/23/2017 - 22:50
Thanks, Tim. As a short-term
Thanks, Tim. As a short-term fix, we have a Drupal H5P Editor patch that adds the CKEditor Source Dialog plugin to the allowable options in the text-editing widget, so that images hosted elsewhere could be included through the HTML. (Our patch also adds the Block Quote option because we would like to use it on the project we're currently using Accordion for.)
Given you are supporting this across multiple platforms, is it appropriate to submit the patch through the Drupal issue queue? If not, where? Do you think the project would be amenable to an Advanced Text library patch that enables these new HTML options? We would love to have these options on our Accordions while still working within the standard H5P library, rather than branching off.
Fri, 03/24/2017 - 08:26
I think we would need a more
I think we would need a more general solution that would work for all plugins, unfortunately. I understand that it makes your solution very brittle as you'll have to keep your branch very close to the standard H5P branch. The Core Team is balancing two competing goals: trying to add as many features as possible and also keeping all the implementations uniform and as stable as possible.
Fri, 03/24/2017 - 23:01
There are 2 parts to this.The
There are 2 parts to this.
The 1st is extending the supported CKEditor plugins. This seems straightforward:
This is a general solution available to all libraries using the HTML text widget. I have a h5peditor-html.js patch I could contribute that adds blockquote and sourcedialog. (FYI, there is code in h5peditor-html.js for blockquote, but the blockquote ckeditor plugin is not installed. The same is true for img.)
The 2nd part is updating AdvancedText, used by Accordian, to use the tags. If there is no desire to update AdvancedText we can work around this using H5P's hook_semantics_alter in Drupal.
Mon, 03/27/2017 - 09:31
You should be able to achieve
You should be able to achieve this without modifying the plugin code by using the "hooks" provided by H5P. These hooks can be implemented in a custom mods module or a custom theme so that you don't have to maintain and apply a patch every time the H5P module is updated. See more information on the documentation guide Authoring Tool Customization.
Wed, 01/09/2019 - 23:10
add images and embed videos
Its been a couple of years and this has to be one of the highest requested features for H5P. Accordions are next to useless without images and video. I really think this request should be prioritised. the hacks suggested below are not available to all users. its time for H5P to make it official.
Thu, 01/10/2019 - 06:36
Hi lushr,I agree that this is
I agree that this is needed in Accordion but currently this is not part of the core team's roadmap. The good thing about H5P is that it is open source so anyone in the community can make the changes.
Wed, 08/31/2016 - 22:25
Would like to see the ability to add images along with text. Hope that will be something that will be added in future releases.
Sat, 09/03/2016 - 06:02
Feature request? Nested Accordion
I think it would be good to have one more nested layer of accordion objects. "Add Sub-panel" under the text box. Too many and it gets to visually complicated.
Mon, 09/05/2016 - 10:07
Hi,This feature is currently
This feature is currently not part of any plans, but you could add it as a feature request on GitHub.
Sun, 11/27/2016 - 15:49
How to change the size of the Title
is there a way I can reduce the size of the Titles?
Mon, 11/28/2016 - 09:41
Hi, yes, you will need to
yes, you will need to edit the H5P code to override the CSS. There isn't a way to do it from the editor. This aritcle may be useful:
Wed, 05/03/2017 - 19:26
accordion items added to gradebook
I notice that when I create an accordion activity with H5P in Moodle, it adds an item to the gradebook. Is there a way to prevent this?
Wed, 05/03/2017 - 20:00
Maybe if you set the max
Maybe if you set the max score to 0. We're working on better ways to handle H5Ps that doesn't have scoring and the Moodle gradebook.
Fri, 06/09/2017 - 14:24
Please can i have access to this tool? Thanks!
Mon, 06/19/2017 - 23:48
Text editor in accordian
Being able to insert images would be really helpful for this one. The other thing that would be really helpful for the text editor would be super script and subscript. I hadn't noticed until today how many of the text editors in the interactives are different.
Still making good use of the accordian, but will be using a few work arounds until the next updates.
Tue, 06/20/2017 - 06:46
Hi,This is a neat idea and
This is a neat idea and there have been several requests for this feature:
Mon, 11/06/2017 - 20:03
Images in Accordian?
Any update on when we might be able to add images?
Tue, 11/07/2017 - 12:40
It's a pending feature
It's a pending feature request. I don't have a specific date but if a member of the community supplies the necessary code, the Core Team will be happy to merge it in!
Sun, 02/11/2018 - 14:02
Code in accodian
Is it possible embed in the accordian box? Thanks
Mon, 02/12/2018 - 07:57
Hi FranJNS,I'm not sure I
I'm not sure I follow, can you please elaborate on this.
Mon, 01/29/2018 - 18:55
Support for other LMS?
Will this work in Blackboard, Canvas or Brightspace? If so, can you provide link to the process? Many thanks!
Tue, 01/30/2018 - 04:54
Welcome to H5P!
Welcome to H5P!
Currently Blackboard, Canvas or Brightspace is not yet supported.
Also several platforms that H5P currently does not support, but that soon will be supported through H5P.com. H5P.com will also integrate third party software to offer support for large videos, math, analytics and storing results in the LMSs.
You can go to H5P.com to learn more and sign up for updates.
Mon, 02/26/2018 - 14:43
Images/ charts to Accordion
Has there been any new update on the request/ wish to integrate images/ charts/ videos into the H5P Accrodion?
Tue, 02/27/2018 - 04:31
Hi Sophia,I'm sorry no
I'm sorry no updates yet. We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful.
Tue, 02/27/2018 - 12:32
Thank you for your quick reply!
What a pity, do you know when this supporter program will approximately be activated?
Tue, 02/27/2018 - 12:45
No ETA yet. It is still in
No ETA yet. It is still in the planning phase. I'm sorry I don't any additional information regarding this. The good thing about H5P is that it is open source so you or anyone in the community can pick this up and add this in the content.
Fri, 03/09/2018 - 15:23
Is it possible to add a picture in the accordion?
Sat, 03/10/2018 - 12:39
Hi Jocelyn,Not as of the
Not as of the moment but thanks a lot for contributing your ideas on how to make H5P better! We’re now working on something called the H5P supporter program allowing the H5P community to vote for and fund the top voted H5P features. Also there are developers in the community who every now and then works on a feature they find interesting or useful. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:
It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”
If the feature can be illustrated with images or videos it always helps
Make it clear what content types this is relevant for, and or if this is a new content type
Make sure you post the feature in the Feature Request forum.
Wed, 04/25/2018 - 22:58
Is it possible to add shortcodes in the content of the panels?
Thu, 05/03/2018 - 15:40
Not by default, but if you
Not by default, but if you add this action to e.g. your theme you should be able to run do_shortcode() on the content's parameters.
Mon, 07/09/2018 - 12:30
Accordion on two or more pages
at first: great tool :-)
I'm wondering how you made it, that you have two pages (like in the example) of Accordion. When I try to create content with Accordion (I use the WordPress Plugin), I have one page only (even when I download the exemple, I just have one page).
How do I add the "Next" and "Previos" links and a second page?
Mon, 07/09/2018 - 13:11
Hi jb-at-h5p,Thank you for
Thank you for the kind words.
The next/previous button in the example below was created outside of the H5P content. Afaik this was created using HTML.
Thu, 05/23/2019 - 12:03
Integrating into Canvas
Am not quite sure how to integrate this into a Canvas Course. I understand teh Programming files...just not how they import into, and onto, a Canvas page.
Will try a few different ways and see what happens ;-D
Fri, 07/17/2020 - 06:32
So far, the easiest way, I have found to integrate into Canvas, is to embed the content onto a canvas page. Good luck!
María Alicia Sá...
Wed, 08/14/2019 - 05:26
hola gracias. aprendiendo a
hola gracias. aprendiendo a usar h5p
Mon, 12/02/2019 - 16:26
Hello h5p !
Hello h5p !
Sat, 04/11/2020 - 19:18
Would really love this content type to allow:
How could I possibly do this?
Using Moodle, not yet familiar with editing/overriding functions/css but willing to go through it.
Mon, 04/13/2020 - 20:04
Hi Jarvel,These proposed
These proposed updates from Oliver should take care of your needs.