Interactive module

Content Toggle block

Switch between two sets of content — like monthly and yearly pricing — with a switch or a segmented control.

Overview

The Content Toggle shows one of two panels, with a control to switch between them. The classic use is pricing: “Monthly / Yearly” with a “Save 20%” badge. Each side is a Toggle Panel that holds any blocks.

At a glance

Block name: wpbb/toggle
Module: Interactive
Find it by searching: Content Toggle
Contains: Toggle Panel
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Monthly vs yearly pricing.
Personal vs business plans.
Before/after or two versions of a text.

Example scenarios

Pricing: labels “Monthly” and “Yearly”, badge “Save 20%”, and three pricing cards in each panel.

See it in action

These are live examples: real Content Toggle blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Switch and segmented control

Open in a new tab

How to add the Content Toggle block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Content Toggle in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Content Toggle in the results. The block appears with the labels “Monthly” and “Yearly”, a “Save 20%” badge and two sample panels.
Configure the content. Click a label on the canvas to edit it — this also shows that label’s panel so you can edit its content. Edit the badge text next to the control.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

First label

What it does: The label for the first panel (shown on load).
What to enter or choose: One or two words.
Default: Monthly
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Monthly”.
Result: Shown to the left of the control.

Second label

What it does: The label for the second panel.
What to enter or choose: One or two words.
Default: Yearly
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: Always.
Example: “Yearly”.
Result: Shown to the right of the control.

Badge

What it does: A small highlight next to the control.
What to enter or choose: A short phrase, or empty to hide it.
Default: Save 20%
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: To promote one option.
Example: “Save 20%”.
Result: A coral pill appears next to the second label.

Panels

What it does: The two content panels.
What to enter or choose: Any blocks in each panel.
How to use it: Click a label to show its panel, then edit the content below.
When to use it: Always — the block needs both panels.
Example: Three pricing cards per panel.
Result: Visitors see the first panel; the control shows the second.
Good to know: The toggle always has exactly two panels.

Settings panel: Toggle

Help text in this panel: “Click a label on the canvas to edit that panel. Visitors see the first panel on load.”

Control

What it does: The type of switch.
What to enter or choose: One of: Switch, Segmented.
Default: Switch
How to use it: Click one of the buttons in the group.
When to use it: Switch: the two labels with an on/off switch between them. Segmented: the two labels as one pill-shaped button pair.
Example: Segmented for a modern pricing page.
Result: The control changes.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Content Toggle offers.

Element: Labels selected first

The two labels. Hover and Active (Active = the label of the visible panel) states.

Styles-tab controls for “Labels”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Active
Colors	Text	—	Normal, Hover, Active
Background	Type	—	Normal, Hover, Active
	Color / Gradient	—	Normal, Hover, Active
	Image	—	Normal
Border	Radius	Yes	Normal
Spacing	Padding	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Active — Applies to the label of the panel being shown.

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Switch

The switch (Switch control only). Its Active state applies when the second panel is shown.

Styles-tab controls for “Switch”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Active
	Color / Gradient	—	Normal, Active
	Image	—	Normal
Border	Border type	—	Normal, Active
Border	Border	—	Normal, Active
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Active — Applies while the second panel is shown (switch “on”).

Element: Badge

The badge.

Styles-tab controls for “Badge”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Radius	Yes	Normal
Spacing	Padding	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Margin, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

A small script (loaded only on pages with a toggle) switches the panels. The hidden panel uses hidden="until-found" so “Find in page” still finds its text.

Accessibility

Both labels are real buttons that announce whether they are pressed.
The switch is announced as a switch with its on/off state.

Limitations and notes

Exactly two panels.
Labels are plain text.