Get Started

Class Toggle

Available as: Web ComponentShortcodeOxygen Element

Toggle CSS classes on any element in the document.

<style> .button { background: cornflowerblue; padding: 0.75rem 1.5rem; border-radius: 0.25rem; color: white; font-weight: 600; } .button--red { background: lightcoral; } </style> <spx-class-toggle toggle="button--red" target="button" local="spxClassToggle"> <button class="button">Click me!</button> </spx-class-toggle>

Properties

inner

Type: booleanDefault: true

If target element should be searched within component or in document.

local

Type: string

Specify a local storage item, so the toggle state will be remembered when the user visits the site again.

target

Type: stringDefault: *

Target element. Can take any querySelector value. (id, class, tag etc.)

toggle

Type: stringDefault: spx-class-toggle--active

List of classes that should be toggled.

Slots

inner

Slot (between HTML tag).

Events

spxClassToggleDidLoad

Fires after component has loaded.