Content toggle

A toggle content, built into your site with no plugin and no library. Two labeled versions of one thing, a switch (role="switch") or two pressed buttons between them, and two panels in slots a and b. Optional badge on one label, a choice remembered for the session, and ?<param>= to preselect. Without JavaScript both panels show under their labels as headings.

Monthly

Starter$12/monthOne site, email support
Studio$29/monthFive sites, a shared library
Agency$79/monthUnlimited sites, priority help

Annual

Starter$115/yearOne site, email support; two months free
Studio$278/yearFive sites, a shared library; two months free
Agency$758/yearUnlimited sites, priority help; two months free

For homeowners

A survey of your home within the week, a written quote, and one person to call from start to finish.

For businesses and landlords

Planned maintenance across every property you manage, one invoice a month, and a report your insurer accepts.

You'll need to give us

The two versions and what each one saysNeeded to startSuch as your monthly and annual prices.

Send these with your request and we can start straight away. Everything else is ours to do.

Let visitors flip between two versions of the same thing — monthly or annual prices, homes or businesses — without leaving the page.

Also called

UABB Content TogglePowerPack Content Togglepricing togglemonthly / annual switchcontent switchertoggle switch

What it replaces

UABB “Content Toggle” module (Beaver Builder)
PowerPack Content Toggle
the monthly/annual toggle of pricing-table plugins

Good for

The pricing page’s monthly or annual switch, and any two versions of the same content a visitor picks between: homes or businesses, metric or imperial, before or during a project. One line of label each side.

Not for

Tabs. A toggle is two versions of ONE thing switched in place, so the panels share a shape (the same plans, two prices). Three or more views, or two different topics (Features and Reviews), are tabs, which name each panel as a tab and scale past two. Also not for hiding content people need; both panels are one click apart, and without JavaScript both show.

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

style="switch": a native <button role="switch"> named by label b, with aria-checked saying whether b is shown (“Annual, switch, on”) and aria-controls naming both panels. Space and Enter toggle it; clicking either visible label sets it too.
style="buttons": two <button aria-pressed> in a group named by `label`; exactly one is pressed.
The badge describes the switch (aria-describedby), so “Save 20%” is heard as well as seen.
The shown panel keeps its label as a heading for screen readers only, so it is clear which version is on the page; the other panel is hidden, not just covered.
Without JavaScript both panels render, each under its label as a heading, and the switch (which could not work) is not shown.
No layout shift: the script right after the element settles it before the first paint. prefers-reduced-motion: the knob jumps instead of sliding and the panel does not fade. In forced-colors mode the track and knob are drawn with system colors.

Where it's live

superherotech.ai: /elements/content-toggle/ (demo)

How to ask for it

“The content-toggle on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.

Want the content toggle on your site?

Tell us about the business. We build the site with it, launch it, and change it whenever you ask.

Start a site that has this See every element