Hi everyone 
Just released Toggler, now live on the Elements store. Quick framing before the feature list: Toggler is not just a “switch on/off” component. It’s a complete two-state content system for your pages — pricing toggles, before/after comparisons, layout switchers, language swaps, anything you need to present in two versions. With four trigger styles, two distinct content modes, persistence, syncing across instances, and external control via utility classes.
A bullet list can only convey so much — do yourself a favour and check the live demo linked below before forming an opinion. That’s where Toggler actually shows what it can do.
2 Content modes
How content gets swapped is the deepest decision you’ll make with Toggler:
• Dropzones Mode — two built-in content areas (A and B) where you drop any Elements components. Switch between them with configurable animations: Fade, Slide Horizontal, Slide Vertical, or None. Adaptive height smoothly animates the container as content of different sizes swaps in.
• CSS Selectors Mode — target ANY elements on the page by class or ID. Toggler applies style transitions (opacity, scale, translateX/Y, blur, shadow, max-height) to create active and inactive states — without moving content into the component itself. One Toggler can orchestrate dozens of elements scattered across the page.
The second mode is the unusual one — and the one that unlocks use cases other toggle components don’t reach: feature-tier highlighting, multi-element reveals, page-wide visual transformations from a single click.
4 Trigger styles
You design how the trigger looks. Pick one:
• Pills — pill-shaped buttons inside a rounded container, with optional smooth sliding background animation that follows the active button. Full control over track, button colors, padding, border radius, border, shadows, and backdrop blur.
• Labels — minimal clickable text labels with active, hover, and default color states. Clean and lightweight for inline toggles.
• Switch — iOS-style toggle with four visual variants: Standard (classic, with optional Fluid Handle that elongates on press for tactile feel), Icon (custom SVG or image inside the handle), Inner Text (ON/OFF labels in the track), and Thin (compact minimal). Configurable scale, shape, colors, shadows, and track border per state.
• Custom — two dropzone slots where you place any Elements component as a trigger. Buttons, images, icons, entire layouts — full creative freedom with opacity states for default, hover, and active.
External control via utility classes
You don’t need the built-in trigger if you’d rather use your own buttons elsewhere on the page. Apply one of these classes to any element to turn it into a remote control:
• toggler-show-a — shows Content A when clicked
• toggler-show-b — shows Content B when clicked
• toggler-toggle — flips between A and B on each click
To target a specific Toggler, set a Toggler ID in the panel (e.g., pricing), then append it to the class: toggler-show-a-pricing. The same ID also keeps multiple Toggler instances in sync — one field, two purposes.
Persistence + Sync
For toggles where the user’s choice matters across sessions:
• Persistence — the last selection is saved to localStorage and automatically restored on page reload
• Toggler ID — multiple Toggler instances with the same ID stay in sync. Toggle one, all others update instantly. Great for repeated pricing tables, side-by-side comparisons, or page-wide language toggles.
• Controller-only mode — a Toggler can hide its own content area entirely to act as a pure controller for synced Toggler instances elsewhere on the page (e.g., one trigger in the hero driving multiple synced cards below, with no markup duplication)
Sticky + Overlap
For long pages where the toggle should stay accessible:
• Sticky Triggers — the trigger sticks to the top of the viewport when the user scrolls past it, with a separately configurable stuck-state (background, opacity, padding, shadow, border radius, border, backdrop blur)
• Overlap Triggers — the trigger overlaps the content area instead of stacking above it, with z-index and offset controls
• Different alignment when stuck — e.g., centered in normal flow, left-aligned when sticky
And plenty more
Toggler also includes: Swipe gestures on mobile (swipe left/right to toggle), Auto Scroll that brings the Toggler into view after a click with configurable offset, Adaptive Height for smooth size transitions, full Theme integration across colors, spacing, border radii, shadows, and typography (no hardcoded values), and responsive dots on most visual properties (padding, margin, opacity, scale, blur, color overrides, and more) so the design adapts per breakpoint. Plus a switch to hide the entire Toggler responsively when needed.
Perfect for
• Pricing pages with monthly/yearly toggles (the classic use case, persistence remembers the user’s choice)
• Before/after comparisons of designs, photos, or feature upgrades
• Theme preview cards (e.g., side-by-side mockups of your product in light and dark variations)
• Feature-tier comparisons that highlight, dim, or scale elements across the page from a single toggle (CSS Selectors mode)
• Multi-language sections with persistence so returning visitors see their preferred version automatically
• Two presentation styles for the same content — narrative overview vs. technical specifications, audience switchers, content variants per persona, or any binary content swap
Links
Live demo: Toggler for Elements - RW Pro Space
Get Toggler: Elements Store
Happy to answer questions or take feedback here. Thanks!
— Massimo
