Adaptive Tabs is a Moodle TinyMCE editor plugin for inserting accessible accordion and responsive tab components into course content.
The plugin is designed for course builders who need structured content areas that work well across desktop, tablet, and mobile screens.
- Accessible tabs and accordions following WCAG 2.2-aligned interaction patterns
- Responsive tab layout that falls back to accordion layout on smaller screens
- Editable mobile breakpoint for responsive tabs, useful when a component has many tabs
- TinyMCE toolbar and Insert menu integration
- Insert 1 to 10 accordion/tab items from the editor menu
- Accordion-only option for content that should never become tabs
- Static saved HTML enhanced by a small frontend runtime
- Compatible with most Moodle content plugins, filters, and embedded content types
- Supports custom LMS-specific CSS through plugin settings
The generated component uses progressive enhancement and accessible HTML patterns:
- Tab buttons are linked to their panels with generated unique IDs
- Tab layout uses
tablist,tab, andtabpanelroles when active - Accordion layout uses buttons with
aria-expanded - Accordion content regions are labelled by their trigger buttons
- Keyboard navigation supports arrow keys, Home, and End
- IDs are generated at runtime to avoid duplicate IDs when multiple components appear on the same page
- Nested tabs and accordions are scoped so parent components do not control child components
The component is designed to support WCAG 2.2 accessibility expectations, but final accessibility also depends on the quality of the content added by course builders.
Responsive tabs use a breakpoint to decide when the component should display as tabs.
Below the breakpoint, the component displays as an accordion. At or above the breakpoint, it displays as tabs.
The default breakpoint is: 720 px
- Read our user and developer documentation
- Take a look at our demo site
This plugin is free, and open source software. You can easily download it and run it on your own web server.