[Proposal] Add Accordion XBlock
See GitHub Ticket and provide feedback before Dec 16, 2025
TL;DR
An accordion is a UI element which shows and hides content in collapsible panels. It is an excellent mechanism for presenting information in a concise manner. We are proposing an XBlock which allows course authors to include an accordion interface while creating courses.
Problem
When the course author has a unit with a lot of text or images, they often need to break it down into multiple units to avoid overwhelming the learners. Dividing the information into multiple units might distract learners and create dissonance. This also puts an artificial constraint on the author to fragment the content.
There is a need for a solution which doesn’t require technical skills and helps the course authors to add information-heavy units in a collapsible manner. This helps the learners to have all the information in a single page without overwhelming them. The accordion interface provides a better alternative for arranging information.
Use Case
As an author, I want more ways to organize and present information in a single page.
As an author, I want to convey a big chunk of information in a single page in a way that doesn’t overwhelm the learner.
As an author, I want to add a lot of information to the unit without requiring excessive scrolling by learners.
As an author, I want to provide definitions and information about topics in context with related definitions and information, without requiring the learner to jump around the course structure to find them all.
As a learner, I want a way to consume information without getting overwhelmed.
As a learner, I want to collapse certain sections of information and pay attention to the information that is important to me at that time.
Proposed Solution
The problem can be solved by introducing the Accordion UI component, where the course author can divide content into multiple collapsible headings. We propose doing this with a natively supported XBlock. The Accordion XBlock helps to organize content under collapsible headings, and also allows users to customize the accordions’ appearance.
The first screen the user sees is one to configure the XBlock’s appearance.
Here, a lot of features of the Accordion can be customized, like the font size and colors. Once that is done, users are shown a screen where they add the accordion content.
On clicking the “Add Accordion” button, users can add the accordion heading, and will be presented with an editor to add the content.
Users can keep adding multiple accordions by clicking the “Add Accordion” button. Once they are done with everything, they can click the “Save” button.
This is how accordions look in the collapsed state and expanded state.
Apart from the functionality, this XBlock is technically unique where the frontend of the XBlock is completely written in React and the UI element that it is using comes directly from Paragon, hence we can be sure that it won’t have any accessibility issues.
We can upgrade the block to Paragon 23+ and make it possible for the block to reuse the theme and stylesheets from MFEs making it fit more natively into the platform UI.
Implementation Plan
The Accordion XBlock will be moved to the Open edX organization
The Accordion XBlock should be audited with an eye for contribution to the core, and any current blocking deficiencies addressed.
The Accordion XBlock will be included in the base installation as an advanced, optional module that instructors can add to their courses. Alternatively, it will be an officially supported extension.
Our client is offering to sponsor the contribution of this XBlock to the project, so this work is expected to be funded.
https://github.com/open-craft/xblock-accordion
Long-term ownership and maintenance plans
We anticipate that several teams will need this functionality, and core contributors from OpenCraft will be actively involved in its development. These contributors will continue to assist with maintenance. If needed, one or more point persons can be designated as the primary contacts for this code after its release.
Contact Person
Farhaan Bukhsh (farhaan at http://opencraft.com )
Other Approaches Considered
In order to implement the Accordion interface, we can use HTML XBlock, but the author would need to have the technical skillset to maintain this code and make changes to it. This is additional overhead on authors, which might distract them from the real problem of creating content and delivering it. This approach has a problem with maintaining accessibility; the course author not only has to write HTML, but also make sure that it is accessible.
In contrast, the Accordion XBlock uses Paragon components, which have been written keeping accessibility in mind, hence the author has to spend no time thinking about it.
Another possible approach is through the H5P XBlock; the Open edX platform can render the H5P content but not create it. The author needs to use an H5P editor to author the content and then generate an H5P file, which can be used by the XBlock to render the content. This approach has an additional issue of hosting the H5P file.
There is a third approach through plugins in TinyMCE editor, but this will require custom code and doesn’t use Paragon or platform theming, so effort would be required in maintaining the code.
Competitive Research
Canvas and Moodle don't have this feature; they use HTML block and H5P content to achieve the same result.
Open questions about rollout or releases
None