Canvas Docs

Toggles

Hide one piece of content behind a heading a visitor clicks to reveal, for a long answer or a set of terms that should not take up the page by default. It is shown in the block inserter as Canvas Toggle and registered as canvas-core/toggle.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Toggles settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • TitleDefaultToggle Title

    The row the visitor clicks to open the panel. Basic formatting and an inline icon are allowed.

  • ContentDefaultLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    What the panel reveals when the row is opened.

  • Open by DefaultDefaultOff

    Start with the panel already showing when the page loads.

  • Step NumberDefaultEmpty

    Optional step badge shown before the title (used by the Numbered style). Leave empty to disable.

Settings

  • Variant ColorDefaultDefault

    Only applies to the Pill, Left Accent Bar, and Outline styles.

    ChoicesDefaultPrimaryDangerSuccess

  • Icon TypeDefaultPlus / Minus

    The pair of glyphs that shows whether the panel is open or closed. Choose None for a row with no indicator.

    ChoicesPlus / MinusCheck / XChevronArrowCustomNone

  • Closed IconDefaultEmpty

    Glyph shown while the panel is closed.

    Shown when Icon Type is "Custom"

  • Open IconDefaultEmpty

    Glyph shown while the panel is open.

    Shown when Icon Type is "Custom"

  • Icon Group ClassesDefaultEmpty

    Utility classes on the .toggle-icon group itself: designs tint the glyphs there rather than on each icon.

  • Trailing Icon (Closed)DefaultEmpty

    A second icon group placed after the title: the shape a design uses when a subject glyph opens the row and a chevron closes it. Empty emits nothing.

  • Trailing Icon (Open)DefaultEmpty

    Open-state glyph for the trailing icon group. Empty reuses the closed glyph.

    Shown when Trailing Icon (Closed) is set

  • Icon PositionDefaultLeft

    Which side of the title the open and closed glyph sits on.

    ChoicesLeftRight

  • Static IconDefaultOff

    Show one icon that does not change when the toggle opens, instead of the closed/open pair.

    Shown when Icon Type is "Plus / Minus" or "Check / X" or "Chevron" or "Arrow" or "Custom"

  • No Outer WrapperDefaultOff

    Emit the toggles with no wrapping element. Ignored when Active Header colours or design overrides are set, which need the wrapper.

  • Animation Speed (ms)Default300

    How long the panel takes to slide open or shut. Set 0 for an instant switch.

    Shown when Write Animation Speed is on

  • Write Animation SpeedDefaultOn

    Writes the animation speed as a data attribute. Off leaves the toggle script on its own default.

  • StyleDefaultSimple

    How the toggle is framed, from a plain row to a bordered card, a pill or a numbered step.

    ChoicesSimpleBackgroundBorderBorder BottomStyle 2Style 3Card / ShadowPill / RoundedLeft Accent BarNumbered / StepMinimal / CleanOutline / Border Fill

Style

  • Header Text ColorDefaultEmpty

    Colour of the title row while the panel is closed.

  • Header Background ColorDefaultEmpty

    Background behind the title row.

  • Header Border ColorDefaultEmpty

    Colour of the rule around or under the title row, for the styles that draw one.

  • Content Background ColorDefaultEmpty

    Background behind the panel that opens.

  • Active Header Text ColorDefaultEmpty

    Colour of the title row while its panel is open, so the open one stands out from the rest.

  • Active Header BackgroundDefaultEmpty

    Background behind the title row while its panel is open.

Advanced

  • Toggle ClassesDefaultEmpty

    Extra utility classes on the .toggle element.

  • Header ClassesDefaultEmpty

    Extra utility classes on the .toggle-header element.

  • Title ClassesDefaultEmpty

    Extra utility classes on the .toggle-title element.

  • Content ClassesDefaultEmpty

    Extra utility classes on the .toggle-content element.

  • Toggle Inline StyleDefaultEmpty

    Styling set on the toggle itself, for a one off appearance no class covers.

  • Content Inline StyleDefaultEmpty

    Styling set on the panel that opens, for a one off padding or colour.

Style tab

  • Title Color

    A style control in the Title group of the Style tab.

  • Icon Color

    A style control in the Icon group of the Style tab.

  • Content Color

    A style control in the Content group of the Style tab.

  • Background Color

    A style control in the Container group of the Style tab.

  • Border Color

    A style control in the Container group of the Style tab.

  • Border Radius

    A style control in the Container group of the Style tab.

  • Font Size

    A style control in the Title group of the Style tab.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?