Class Toggle

Available as: Web ComponentShortcodeOxygen Element

Toggle CSS classes on any element in the document.

<style> .color-red { color: red; } .bg-yellow { background-color: yellow; border-color: yellow; } </style> <spx-class-toggle toggle="color-red bg-yellow" local="spxClassToggleDocumentationMultiple"> <button>Click me!</button> </spx-class-toggle>
<style> .red { color: red; } </style> <spx-class-toggle toggle="red" local="spxClassToggleDocumentationSingle"> <button>Click me!</button> </spx-class-toggle>

Properties

display

Type: stringDefault: 'block'CSS variable: --spx-class-toggle-display

Component display property.

local

Type: string

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

target

Type: string

Target element. Can take any querySelector value. (id, class, tag etc.) If none is set it will default to the first element inside.

toggle

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

List of classes that should be toggled.

Events

spxClassToggleDidLoad

Fires after component has loaded.

Methods

reload

Reload component.