Brigade Blocks Docs v1.1.0

Interactive module

Toggle Panel block

One side of a Content Toggle. Holds any blocks.

Overview

A Toggle Panel is one of the two sides of a Content Toggle. The first panel is visible on load; the second appears when visitors use the control. Toggle Panels are created automatically with the Content Toggle and cannot be added from the inserter.

At a glance

Block name
wpbb/toggle-panel
Module
Interactive
Find it by searching
Toggle Panel
Used inside
Content Toggle (it cannot be used on its own)
Loads JavaScript on the site
No

When and why to use it

  • The monthly (or yearly) prices of a pricing section.

How to add the Toggle Panel block

  1. Insert a Content Toggle. Its two Toggle Panels are created automatically (they are not in the block inserter).
  2. Choose a panel. Click the first or second label of the toggle to show that panel in the editor.
  3. Edit the content. Click inside the panel (“Panel content…”) and type, or add blocks with +.
  4. Save or publish.

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)

Content

What it does
The content shown when this side is selected.
What to enter or choose
Any blocks — paragraphs, lists, images, buttons, even another Brigade block.
How to use it
Click in the content area (it starts with “Panel content…” or sample text) and type, or use the + to add blocks.
When to use it
Always.
Example
A paragraph and a Button.
Result
The blocks appear inside.

Design & styling

Toggle Panels have no styling controls of their own; style the blocks inside them, or the parent Content Toggle.

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.

This block adapts to the screen width on its own and has no per-device settings.

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.
  • This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.
  • This block is not listed in the inserter; it is created automatically by its parent block.

HTML anchor becomes the panel ID.

Limitations and notes

  • Not available in the inserter; a toggle always has exactly two panels.