megamotion

Tabs & Sliders

Tabs to accordion

Starts as tabs and becomes an accordion at medium and up.

Overview

The same indexed group works as tabs by default and becomes an accordion at medium and up.

Details

In accordion mode, the first child stays visible as the local accordion header.

Updates

In tabs mode, the full target item behaves like one panel.

FAQ

The active item stays synced to the matching trigger child.

Accordion

Multi-open accordion using the same indexed child system.

Admissions

Accordion headers come from the first child in each target item.

Tuition

Multi mode allows more than one accordion item to stay open.

Support

Each item can still be targeted by index through the trigger group.

Slider

Slider uses the same indexed dwn system as tabs. The motion layer also supports transition switching and autoplay progress.

Dropdowns

Overlay is the default dropdown mode. Inline keeps the panel in normal flow.

Account menu

This dropdown is positioned as an overlay and closes on outside click.

Inline help

Inline dropdown stays in flow and pushes content below it down.

Drawers

Drawers are edge-attached overlays.

Motion layer

The motion layer adds optional transitions to supported M Plugin behaviors without changing the main trigger and target setup. Load css/motion.css after css/mega.css, and load js/motion.js after js/mega.js.

Motion is enabled with data-m-motion="auto" on the target group. Sliders can also use motion-specific attributes for transition style and progress placement.

How to use

Add the main M Plugin markup with matching data-m-trigger and data-m-target values.
Load the motion layer CSS after the main plugin CSS.
Load the motion layer JS after the main plugin JS.
Add data-m-motion="auto" to any supported target you want animated.
For sliders, optionally add data-m-slider-transition and data-m-slider-progress.

Basic example

<div data-m-trigger="demo-tabs dwn">
  <button type="button">One</button>
  <button type="button">Two</button>
</div>

<div data-m-target="demo-tabs dwn tabs" data-m-motion="auto">
  <section data-m="active">...</section>
  <section>...</section>
</div>

In this example, the tabs still work the normal M Plugin way, but the active panel now gets motion-layer transitions.

Feature	Where it goes	Value	What it does	Notes
Enable motion	Target group	`data-m-motion="auto"`	Turns on motion-layer support for that target.	Use on supported tabs, accordion, dropdowns, modals, drawers, and sliders.
Slider transition	Slider target	`data-m-slider-transition="fade"`	Uses fade transition between slides.	This is the default if no slider transition is set.
Slider transition	Slider target	`data-m-slider-transition="slide"`	Uses directional slide motion based on next, previous, or direct index change.	Good for ordered slide movement.
Slider transition	Slider target	`data-m-slider-transition="slide-left"`	Always uses one consistent slide-left direction.	Useful when direction should stay fixed.
Slider transition	Slider target	`data-m-slider-transition="slide-right"`	Always uses one consistent slide-right direction.	Useful when direction should stay fixed.
Transition buttons	Trigger button	`data-mfx-transition-target` + `data-mfx-transition`	Updates the target slider transition mode.	Used in the demo buttons above.
Progress bar placement	Slider target	`data-m-slider-progress="overlay"`	Places the autoplay progress bar over the slider.	Best for compact slider layouts.
Progress bar placement	Slider target	`data-m-slider-progress="below"`	Places the autoplay progress bar below the slider.	Useful when overlay space should stay clean.
Autoplay	Slider target	`autoplay`	Automatically advances the slider.	Works with motion-layer progress support.
Autoplay timing	Slider target	`ms-5000`	Sets autoplay interval in milliseconds.	The progress bar uses the same timing.
Pause on hover	Slider target	`pause-hover`	Pauses autoplay while the slider is hovered.	Useful for pointer users.
Pause on focus	Slider target	`pause-focus`	Pauses autoplay when focus is inside the slider.	Useful for keyboard users.
Autoplay toggle	Trigger button	`data-m-trigger="name autoplay-toggle"`	Lets users start or stop autoplay.	Optional label and icon spans are supported.

Slider example

<div data-m-trigger="hero-slider dwn">
  <button type="button">Slide 1</button>
  <button type="button">Slide 2</button>
</div>

<div
  data-m-target="hero-slider dwn slider autoplay ms-5000 pause-hover pause-focus"
  data-m-motion="auto"
  data-m-slider-transition="slide"
  data-m-slider-progress="overlay"
>
  <section data-m="active">...</section>
  <section>...</section>
</div>

M Plugin info and authoring guide

This page documents the current working M Plugin system as it exists in the zip. It is focused on supported patterns, current token behavior, responsive overrides, and authoring rules.

What is currently supported

These are the supported interaction patterns and control tokens shown by the current CSS and JS files.

Area	Supported item	What it does
Core	Plain shared-name toggle	Connects triggers and targets by shared name without requiring indexed child groups.
Core	`dwn` indexed groups	Uses direct children as ordered items inside the matched target group.
Display mode	`tabs`	Single active indexed display with matching trigger sync.
Display mode	`accordion`	Expandable indexed display using the first child of each item as the local header.
Display mode	`slider`	Single active indexed display with ordered navigation support.
Slider	Autoplay	Automatically advances the active slide when enabled.
Slider	Play / pause control	Lets a user start or stop autoplay directly.
Slider	Swipe / drag	Supports directional slide movement from the slide area.
Popup	`dropdown`	Supports overlay and inline dropdown panel behavior.
Popup	`modal`	Displays the active target inside the shared modal layer with backdrop support.
Popup	`drawer`	Displays the active target as an edge-attached overlay panel.
Controls	`at-*`	Directly opens a specific indexed item using one-based child targeting.
Controls	`next` / `prev`	Moves through an ordered indexed group.
Responsive	Responsive token overrides	Allows behavior tokens to change at supported breakpoints.

How the system connects

The system matches triggers and targets by shared name. The first token is the connection name. Additional tokens define grouping, behavior, actions, and mode.

Part	Use on	What it means	Example
`data-m-trigger`	Trigger elements	Connects a trigger to all matching targets by shared name.	`data-m-trigger="demo-core dwn"`
`data-m-target`	Target elements	Connects a target to matching triggers by shared name and defines behavior tokens.	`data-m-target="demo-core dwn tabs"`
`data-m="active"`	Target or target child	Sets the default open or current item on load.	`<section data-m="active">`
`data-m-close`	Element inside target	Closes the nearest related open target.	`<button data-m-close>Close</button>`
Shared name	Trigger and target	The first token links related elements together.	`demo-core`
Matching rule	System	A trigger affects all matching targets with the same shared name.	`data-m-trigger="account-menu"`

Token reference

These are the current authoring tokens used by the system.

Area	Token	Use on	What it does	Example
Grouped mode	`dwn`	Trigger or target	Uses direct children as an indexed group.	`data-m-target="demo-core dwn tabs"`
Indexed targeting	`at-1`, `at-2`, `at-3`	Trigger	Targets a specific child inside a matching `dwn` group using one-based indexing.	`data-m-trigger="demo-core dwn at-2"`
Action	`toggle`	Trigger	Default plain trigger action. If omitted, a plain trigger toggles.	`data-m-trigger="help-panel"`
Action	`open`	Trigger	Opens matching targets directly.	`data-m-trigger="x-modal open"`
Action	`close`	Trigger	Closes matching targets directly.	`data-m-trigger="help-panel close"`
Action	`next`	Trigger	Moves to the next child in an indexed group.	`data-m-trigger="demo-core dwn next"`
Action	`prev`	Trigger	Moves to the previous child in an indexed group.	`data-m-trigger="demo-core dwn prev"`
Behavior	`tabs`	Target	Indexed single-panel tab behavior.	`data-m-target="demo-core dwn tabs"`
Behavior	`accordion`	Target	Uses the first child of each item as the visible accordion header and the following children as collapsible content.	`data-m-target="demo-core dwn accordion"`
Behavior	`slider`	Target	Indexed single-item display with grouped triggers and ordered navigation support.	`data-m-target="hero-slider dwn slider"`
Behavior	`dropdown`	Target	Creates a dropdown or popup panel.	`data-m-target="account-menu dropdown"`
Behavior	`menu`	Target	Adds menu-style keyboard behavior when the dropdown content is truly a menu.	`data-m-target="site-actions dropdown menu"`
Behavior	`modal`	Target	Promotes the active target into the shared modal layer with one shared backdrop.	`data-m-target="x-modal modal"`
Behavior	`drawer`	Target	Promotes the active target into a drawer layer attached to a viewport edge.	`data-m-target="drawer-right drawer right"`
Mode	`single`	Target	Forces a single open or current item when that mode is needed.	`data-m-target="demo-core dwn accordion single"`
Mode	`multi`	Target	Allows multiple items to stay open together.	`data-m-target="faq dwn accordion multi"`
Dropdown position	`up`, `down`, `left`, `right`	Target	Controls dropdown direction when used with dropdown behavior.	`data-m-target="menu-name dropdown down start"`
Alignment	`start`, `center`, `end`	Target	Controls alignment of dropdown content relative to the trigger.	`data-m-target="menu-name dropdown right center"`
Dropdown mode	`inline`	Target	Makes a dropdown open in normal flow instead of as an overlay.	`data-m-target="menu-name dropdown inline"`
Slider	`autoplay`	Target	Enables automatic slide advancing for supported sliders.	`hero-slider dwn slider autoplay`
Slider	`pause-hover`	Target	Pauses autoplay while the slider is hovered.	`hero-slider dwn slider autoplay pause-hover`
Slider	`pause-focus`	Target	Pauses autoplay when focus is inside the slider.	`hero-slider dwn slider autoplay pause-focus`
Responsive override	`data-m-sm`	Trigger or target	Adds or changes tokens at the small breakpoint and up.	`data-m-sm="accordion"`
Responsive override	`data-m-md`	Trigger or target	Adds or changes tokens at the medium breakpoint and up.	`data-m-md="accordion"`
Responsive override	`data-m-lg`	Trigger or target	Adds or changes tokens at the large breakpoint and up.	`data-m-lg="tabs"`
Responsive override	`data-m-xl`	Trigger or target	Adds or changes tokens at the extra-large breakpoint and up.	`data-m-xl="dropdown menu"`

Reserved tokens

These words are parser-controlled behavior tokens in the current plugin and should not be used as casual shared names.

Token	Category	Current meaning
`dwn`	Grouping	Uses direct children as an indexed group.
`toggle`	Action	Toggles the matching target.
`open`	Action	Opens the matching target directly.
`close`	Action	Closes the matching target directly.
`next`	Action	Moves to the next item in an ordered indexed group.
`prev`	Action	Moves to the previous item in an ordered indexed group.
`modal`	Behavior	Promotes the active target into the shared modal layer.
`drawer`	Behavior	Promotes the active target into a drawer layer attached to a viewport edge.
`dropdown`	Behavior	Creates a dropdown or popup panel.
`menu`	Behavior	Adds menu-style keyboard behavior when the content truly acts like a menu.
`tabs`	Behavior	Enables indexed tab behavior with one active item at a time.
`accordion`	Behavior	Enables accordion behavior using the first child of each item as the local header.
`slider`	Behavior	Enables indexed slider behavior.
`single`	Mode	Forces a single open or current item where that mode applies.
`multi`	Mode	Allows multiple items to stay open together where that mode applies.
`inline`	Mode	Makes dropdown content open in normal document flow.
`up`	Direction	Positions a dropdown above its trigger.
`down`	Direction	Positions a dropdown below its trigger.
`left`	Direction	Positions a dropdown or drawer to the left side.
`right`	Direction	Positions a dropdown or drawer to the right side.
`top`	Direction	Used by drawer and motion-side logic where supported.
`bottom`	Direction	Used by drawer and motion-side logic where supported.
`start`	Alignment	Aligns dropdown content to the start edge of the trigger.
`center`	Alignment	Centers dropdown content relative to the trigger.
`end`	Alignment	Aligns dropdown content to the end edge of the trigger.
`autoplay`	Slider	Enables automatic slide advancement for supported sliders.
`pause-hover`	Slider	Pauses autoplay while the slider is hovered.
`pause-focus`	Slider	Pauses autoplay when focus is inside the slider.
`autoplay-toggle`	Slider	Toggles slider autoplay on or off.

Parser and token notes

These notes describe how to think about the current token strings when writing M Plugin markup.

Topic	Current note
First token	The first token is the shared connection name between matching triggers and targets.
Trigger tokens	Trigger tokens describe grouped control behavior or actions such as `dwn`, `open`, `close`, `next`, `prev`, or `at-*`.
Target tokens	Target tokens describe the matched behavior such as `tabs`, `accordion`, `slider`, `dropdown`, `modal`, `drawer`, or mode and placement tokens.
`dwn` placement	When a pattern depends on ordered children, keep `dwn` in the active token set.
Responsive overrides	Responsive M attributes merge in override tokens and resolve conflicts. They are not a simple full reset.
Readable naming	Prefer stable custom names such as `demo-tabs`, `account-menu`, `hero-slider`, or `faq`.

Current token shape examples

data-m-trigger="demo-core dwn"
data-m-target="demo-core dwn tabs"

data-m-trigger="hero-slider dwn next"
data-m-target="hero-slider dwn slider"

data-m-trigger="drawer-right open"
data-m-target="drawer-right drawer right"

data-m-trigger="account-menu"
data-m-target="account-menu dropdown down end"

Responsive override notes

Responsive M attributes change the active token set at the matching breakpoint.

Area	Rule	Current expectation
Override model	`data-m-sm`, `data-m-md`, `data-m-lg`, and `data-m-xl` merge in override tokens and resolve conflicts.	Use them to change behavior tokens without changing the shared name.
Shared name	Keep the same shared name across default and responsive states.	The connection name should stay stable while behavior tokens change.
Target overrides	Responsive attributes can be used on targets when the target behavior must change.	A target can switch between supported patterns such as `tabs` and `accordion`.
Default state	The base `data-m-trigger` or `data-m-target` value defines the default behavior before any breakpoint override applies.	Think of the non-responsive attribute as the starting mode.
Indexed groups	If the override still depends on indexed children, keep `dwn` in the active token set.	The group remains ordered by direct child position.
Structure compatibility	Do not switch to a mode that the current markup cannot support.	The markup shape must still work for each supported mode.

Common responsive examples

<div
  data-m-target="demo-core dwn tabs"
  data-m-md="accordion"
>
  ...
</div>

<div
  data-m-target="feature-set dwn accordion"
  data-m-lg="tabs"
>
  ...
</div>

Pattern examples

These examples show the currently supported authoring patterns and how the tokens are combined.

Pattern	Trigger	Target	Notes
Top tabs	`data-m-trigger="demo-tabs dwn"`	`data-m-target="demo-tabs dwn tabs"`	Standard indexed tab row with one panel active at a time.
Tabs to accordion	`data-m-trigger="demo-core dwn"`	`data-m-target="demo-core dwn tabs" data-m-md="accordion"`	Tabs by default, accordion at medium and up.
Indexed panel from remote trigger	`data-m-trigger="demo-core dwn at-2"`	`data-m-target="demo-core dwn tabs"`	Targets the second child directly from anywhere.
Next / previous control	`data-m-trigger="demo-core dwn next"`	`data-m-target="demo-core dwn tabs"`	Moves through indexed items in order.
Multi accordion	`data-m-trigger="faq dwn"`	`data-m-target="faq dwn accordion multi"`	Multiple accordion items can stay open together.
Generic dropdown	`data-m-trigger="account-menu"`	`data-m-target="account-menu dropdown"`	Outside click and Escape close it by default.
Dropdown inline	`data-m-trigger="filters-menu"`	`data-m-target="filters-menu dropdown inline"`	Opens in normal flow and pushes nearby content down.
Modal group	`data-m-trigger="demo-modal dwn"`	`data-m-target="demo-modal dwn modal"`	Grouped triggers open matching modal items by index.
Drawer right	`data-m-trigger="drawer-right open"`	`data-m-target="drawer-right drawer right"`	Edge-attached overlay panel opening from the right.
Drawer left	`data-m-trigger="drawer-left open"`	`data-m-target="drawer-left drawer left"`	Edge-attached overlay panel opening from the left.
Drawer bottom	`data-m-trigger="drawer-bottom open"`	`data-m-target="drawer-bottom drawer bottom"`	Edge-attached overlay panel opening from the bottom.
Slider	`data-m-trigger="hero-slider dwn"`	`data-m-target="hero-slider dwn slider"`	Single-item indexed display with grouped triggers and ordered navigation support.

Accessibility notes

These notes document the current accessibility expectations for supported M Plugin patterns and the markup used to trigger them.

Area	Current expectation	Notes
Interactive elements	Use real interactive elements such as `button` where possible for triggers.	This gives keyboard access and expected semantics by default.
Keyboard activation	Triggers should remain usable with keyboard input.	This is especially important for custom trigger elements.
Tabs	Tab triggers should reflect the current active item.	Use the current plugin behavior as the source of truth for active-state updates.
Accordion	The visible first child should clearly function as the item header and open or close control.	Users should be able to understand what expands and collapses.
Modal	Include a clear local close control when appropriate.	`data-m-close` is the documented local close path.
Drawer	Drawer controls should remain keyboard reachable and close cleanly.	Drawer behavior should feel consistent with other overlays.
Dropdown	Popup-style dropdowns should close with Escape and outside click where supported.	Use `menu` only when the content truly behaves like a menu.
Visible labels	Triggers should have clear visible text or another accessible name.	Avoid unlabeled controls.

Troubleshooting guide

Use this when a current M Plugin pattern does not behave as expected.

Problem	What to check	Likely cause
Nothing opens	Confirm the trigger and target use the same first token.	The shared name does not match.
The wrong target opens	Check whether another target is using the same shared name.	Shared-name collision or reused name.
`at-*` opens the wrong item	Check child order and confirm there are no unexpected wrapper elements inside the indexed target.	The visible order does not match direct child order.
`next` or `prev` does not move correctly	Confirm the target is an ordered `dwn` group and the intended behavior is an indexed mode.	The control is not pointing at a valid ordered group.
Tabs show the wrong panel	Compare trigger count to target child count and check which item is marked active by default.	Child mismatch or incorrect default active item.
Accordion opens oddly	Check that each item uses the first child as the local header and the following children as the collapsible body.	The accordion item structure does not match the current rule.
Slider movement feels off	Check direct child order, current active slide, and whether grouped controls stay synced.	Indexed order or sync state is off.
Dropdown appears in the wrong place	Check direction and alignment tokens on the target.	The target token list does not match the intended overlay position.
Modal shows in the page instead of as an overlay	Confirm the target still includes `modal`.	The behavior token is missing or was overridden incorrectly.
Drawer opens from the wrong side	Check the directional token such as `left`, `right`, or `bottom`.	The drawer target tokens do not match the intended edge.
Responsive behavior does not switch correctly	Check whether the responsive attribute contains the needed behavior token change.	The override tokens do not describe the intended mode.

Dark Mode - needs work

It seems that you have reduce motion enabled!