dev

CollapsibleHeaders automatically adds collapsible toggles to all headers on a page. It runs once per content block and only when headers exist, ensuring compatibility with dynamically‑loaded content such as tabbers, modules, and AJAX‑loaded elements.

Installation

Customisation

CollapsibleHeaders can be customised by adding a .collapsible-headers element to MediaWiki:Common.css and setting any of the following CSS custom properties. 

.collapsible-headers {
    --ch-color: var(--theme-page-text-color);
    --ch-size: 12px;
    --ch-animation-duration: 0s;
    --ch-easing-style: linear;

    --ch-arrow: <svg class="wds-icon wds-icon-small" aria-hidden="true" focusable="false"><use xlink:href="#wds-icons-menu-control-small"></use></svg>;
    --ch-arrow-rotation: 180deg;

    --ch-collapse-all: true;
    --ch-collapse-all-content: ▽;
    --ch-collapse-all-size: 18px;
}

Global Parameters

These properties apply to all headers on the page.

Property Description Default
--ch-color Color of the toggle arrow. var(--theme-page-text-color)
--ch-size Size of the toggle’s visual box. Affects text, SVGs, and images equally. 12px
--ch-animation-duration Duration of the collapse/expand animation. 0s
--ch-easing-style CSS easing function for animations. linear
--ch-arrow HTML or text used for the header toggle. Fandom WDS menu‑control chevron
--ch-arrow-rotation Rotation applied when collapsed. 180deg
--ch-collapse-all Enable or disable the side‑tool collapse‑all button. true
--ch-collapse-all-content Symbol or HTML used for the collapse‑all button. ▽
--ch-collapse-all-size Font size of the collapse‑all button. 18px

Per-Header Customisation

Individual headers can be customised by adding a <span class="ch-custom"> inside the header's wikitext. These override the global CSS properties for that header only. 

== My Header <span class="ch-custom" data-ch-color="red" data-ch-animation-duration="1s"></span> ==

Per-Header Parameters

Attribute Description Default
data-ch-color Color of the toggle arrow for this header. Inherits global
data-ch-arrow Arrow symbol or HTML for this header. Inherits global
data-ch-arrow-rotation Rotation applied when collapsed. Inherits global
data-ch-animation-duration Animation duration for this header. Inherits global
data-ch-easing-style Easing function for this header. Inherits global
data-ch-start-collapsed Start this header collapsed. false
data-ch-collapse Skip this header entirely. true

Examples

The following examples demonstrate the per-header customisation options.

Custom Arrow

=== My Header <span class="ch-custom" data-ch-arrow="🢁"></span> ===

Custom Rotation

=== My Header <span class="ch-custom" data-ch-arrow-rotation="-90deg"></span> ===

Animation

=== My Header <span class="ch-custom" data-ch-animation-duration="0.4s" data-ch-easing-style="ease-in-out"></span> ===

Starts Collapsed

=== My Header <span class="ch-custom" data-ch-start-collapsed="true"></span> ===

Non-Collapsible

=== My Header <span class="ch-custom" data-ch-collapse="false"></span> ===

Everything at Once

=== My Header <span class="ch-custom" data-ch-arrow="🟈" data-ch-arrow-rotation="-405deg" data-ch-animation-duration="0.4s" data-ch-easing-style="ease-in-out" data-ch-start-collapsed="true"></span> ===

Changelog

Date Notes Updated by
May 29, 2026

Major Refactor

  • Rewrote header traversal using sibling-based DOM walking for reliability
  • Normalized text-node handling by converting stray text into paragraph blocks
  • Added MutationObserver support for dynamic wiki content changes
  • Added ResizeObserver-based layout recalculation on container resize
  • Improved animation scheduling system with RAF-based batching
  • Fixed false header detection from non-heading `.mw-headline` elements
  • Improved pointer-based toggle interaction with drag threshold detection
  • Improved collapse state consistency under rapid user interaction
 DaBritishWaffle
May 27, 2026 Bug Fixes and Customisation
  • Fixed a conflict where nested mw-collapsible toggle buttons could be clipped inside collapsed header sections.
  • Fixed file blocks being moved to the top of a section when CollapsibleHeaders handled floating files.
  • Added --ch-arrow-rotation and data-ch-arrow-rotation to control how far the toggle rotates when collapsed.
  • Changed the default toggle to Fandom's WDS dropdown chevron.
  • Changed the default collapsed toggle rotation to 180deg.
  • Added automatic expansion for collapsed headers when visiting a link to content inside them, including any collapsed parent headers.
  • Changed the default toggle color to use var(--theme-page-text-color).
  • Added a side-tool button to collapse or expand all headers at once.
  • Fixed expanded section heights not updating after page width changes, which could cause gaps or overlapping content.
 DaBritishWaffle
May 24, 2026 Bug Fixes
  • Fixed a bug where images would cut off randomly before the next header.
  • Fixed a bug where expand animations wouldn't play properly
 DaBritishWaffle
May 15, 2026 Fixed a bug where a header squished by a element that caused some part of the screen to be overtaken (e.g. an infobox) would cause the whole text in that section to be squished. DaBritishWaffle
April 28, 2026 Major Update
  • Added per-header customisation via <span class="ch-custom"> with support for custom color, arrow, animation duration, easing, start-collapsed state, and disabling collapse entirely.
  • Fixed layout issue where wrapped content would be squished when a floated element (e.g. an infobox) was present — resolved by using display: flow-root on the outer wrapper.
  • Changed default easing from ease to linear.
  • Transitions are now applied per-header inline rather than globally, allowing per-header animation overrides.
 DaBritishWaffle
April 26, 2026 Major Update
  • Customisation features added - change color, size, and arrow symbol.
    • Most the stylization has been left the same as before as to not change styling entirely for everyone - the only change is making the default colors for the toggle button to match the current theme.
  • Animations were added, allowing you to set custom animation styles and times for collapsing and expanding headers.
    • Animations include rotating the arrow, and text sliding in/out of the header.
  • Ensured the script only loads once.
  • Added accessibility support for screen readers.
 DaBritishWaffle
April 9, 2026 Added compatibility for all headers using mw-headline. DaBritishWaffle
April 8, 2026 First publication of the snippet. DaBritishWaffle
Text above can be found here (edit)