Accordion

Primary tabs

Submitted by H5P Group on Fri, 01/08/2016 - 15:59

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.

6724

Accordion Example

H5P Group

62954

Accordion Example

H5P Group

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.

And more

Description

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.

Features

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.

Comments

Marc

Tue, 06/28/2016 - 14:44

Embed Video

Are you likely to develop this further by allowing the input of images/video in the expanded box?

falcon

Tue, 06/28/2016 - 19:17

Yes, that is quite likely :)

Jessie

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!

tim

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.

dale42

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:

Add the appropriate CKEditor plugin(s) to h5peditor/ckeditor/plugins (e.g. blockquote)
Update h5peditor/scripts/h5peditor-html.js

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.

icc

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.

lushr

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.

BV52

Thu, 01/10/2019 - 06:36

Hi lushr,I agree that this is

Hi lushr,

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.

-BV52

jbert21

Wed, 08/31/2016 - 22:25

Images

Would like to see the ability to add images along with text. Hope that will be something that will be added in future releases.

roblespar

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.

fnoks

Mon, 09/05/2016 - 10:07

Hi,This feature is currently

Hi,

This feature is currently not part of any plans, but you could add it as a feature request on GitHub.

smarty01

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:

https://h5p.org/documentation/for-developers/visual-changes

grackle

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.

Dmunday

Fri, 06/09/2017 - 14:24

Access

Please can i have access to this tool? Thanks!

JRDingwall

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:

https://h5p.org/node/44723

https://h5p.org/node/18392

https://h5p.org/node/62718

dawn6767

Mon, 11/06/2017 - 20:03

Images in Accordian?

Any update on when we might be able to add images?

Great tool.

thanks

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!

FranJNS

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

Hi FranJNS,

I'm not sure I follow, can you please elaborate on this.

iainmcpherson

Mon, 01/29/2018 - 18:55

Support for other LMS?

Love this!

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!

Hi iainmcpherson,

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.

SophiaZic

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?

greetings,

Sophia

Tue, 02/27/2018 - 04:31

Hi Sophia,I'm sorry no

Hi Sophia,

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.

JocelynH

Fri, 03/09/2018 - 15:23

Add Picture

Is it possible to add a picture in the accordion?

Sat, 03/10/2018 - 12:39

Hi Jocelyn,Not as of the

Hi Jocelyn,

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.

marbaque

Wed, 04/25/2018 - 22:58

shortcodes

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.

jb-at-h5p

Mon, 07/09/2018 - 12:30

Accordion on two or more pages

Hi,
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

Hi jb-at-h5p,

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.

Rudi1234

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

ecqtpie

Fri, 07/17/2020 - 06:32