Documentation and review guide

Adaptive Tabs for Moodle TinyMCE

A TinyMCE plugin that helps course builders insert accessible accordions and responsive tabs directly into Moodle content.

Format
TinyMCE subplugin
Layouts
Tabs or accordion
Breakpoint
Editable per component
Output
Static HTML plus runtime

Live demo

Preview the responsive behavior

Use the viewport buttons and breakpoint slider to see how responsive tabs switch into an accordion layout when space is limited.

Preview width

Introduce the topic, outcomes, and pacing for the module in a compact structure that works on every device.

Group readings, media, and instructor notes without forcing long pages of vertical scanning.

Add activity instructions, embedded tools, or filtered content inside a panel while keeping each component scoped.

Keep assessment criteria close to supporting material and preserve keyboard access in tab and accordion modes.

Current layout: tabs at 720px breakpoint.

What this demonstrates

  • Tabs appear when the available width meets the selected breakpoint.
  • The same content becomes an accordion at smaller widths.
  • Keyboard and ARIA state update with the active layout.
  • Each component scopes its own tabs and panels.

Accessibility

Built around WCAG 2.2 expectations

The plugin follows accessible disclosure and tabs patterns, while keeping generated IDs unique so multiple components can appear on the same Moodle page.

Semantic controls

Tabs are buttons, accordion triggers are buttons, and panels are labelled by their controls.

Keyboard support

Arrow keys, Home, and End help learners move across tabs and accordion headings.

Progressive enhancement

The saved content remains readable HTML, then the runtime adds ARIA state and interactions.

Responsive behavior

Adjust the breakpoint when tabs need more space

Responsive tabs default to a 720px breakpoint. Course builders can select a tabs component in TinyMCE and choose a different breakpoint when there are many tab labels.

Tip: use a higher breakpoint for five or more tabs, long labels, or pages with narrow content columns.

Editor workflow

Integrated with the TinyMCE content editor

The plugin adds an Accordion tabs menu to TinyMCE. Course builders can insert responsive tabs or accordion-only content, then choose from one to ten items.

  1. Select the insertion point in the TinyMCE content area.
  2. Open the Accordion tabs menu from the toolbar or Insert menu.
  3. Choose responsive tabs or accordion only.
  4. Select the number of items to insert.
  5. Edit headings and panel content directly in the editor.

Custom styling

Use LMS theme defaults or add scoped CSS

The component inherits the LMS font by default. Site administrators can add scoped CSS in the plugin settings when the component needs to match a local design system.

Example custom CSS 
.tiny-adaptivetabs {
    --tiny-adaptivetabs-accent: #005eb8;
    --tiny-adaptivetabs-accent-strong: #003f7d;
    --tiny-adaptivetabs-line: #c8d2dc;
}

.tiny-adaptivetabs__accordion-button {
    font-weight: 600;
}

Compatibility

Designed for Moodle content ecosystems

Adaptive Tabs saves standard HTML and enhances it with a small frontend runtime, so it works with most content filters, embedded media, and plugin output.

Moodle filters Embedded media H5P content Generico snippets Multiple components per page Nested tabs and accordions

Install

Place the plugin in the TinyMCE plugins directory

Install the plugin folder in Moodle, run upgrade, then purge caches so new AMD files and hooks are loaded.

Install path and commands 
lib/editor/tiny/plugins/adaptivetabs

php admin/cli/upgrade.php
php admin/cli/purge_caches.php