Toggler

Toggles a class or attribute on click, for small interactions that would otherwise need a one-off handler.

Bootstrap’s toggler docs describe the markup and CSS.

Example

bsToggler takes the class to toggle. On an element that is not a button, it adds role="button", keyboard support and aria-pressed.

Click to toggle fg-danger

HTML

<div class="w-100 p-3 rounded border" bsToggler="fg-danger">
  Click to toggle <code>fg-danger</code>
</div>

Targets

Pass one element or an array to target to toggle them instead.

First

Second, which starts with bg-2

HTML

<div class="vstack gap-2">
  <button
    type="button"
    bsButton
    theme="primary"
    class="align-self-start"
    bsToggler="bg-2"
    [target]="[one, two]">
    Toggle both
  </button>
  <div #one class="p-3 rounded border">First</div>
  <div #two class="p-3 rounded border bg-2">Second, which starts with <code>bg-2</code></div>
</div>

Attributes

Set attribute to toggle an attribute to the given value, for example disabled on a fieldset.

Name

HTML

<button
  type="button"
  bsButton
  theme="secondary"
  bsToggler=""
  attribute="disabled"
  [target]="fields">
  Toggle disabled
</button>
<fieldset #fields class="mt-3">
  <label class="form-label" for="toggler-name">Name</label>
  <input class="form-control" id="toggler-name" />
</fieldset>

API

BsToggler

Selector: [bsToggler] · Exported as: bsToggler

Inputs

Name	Type	Default	Description
`bsToggler`	`string`	`required`	Class name, or attribute value, to toggle.
`attribute`	`string`	`'class'`	Attribute to toggle.
`target`	`HTMLElement \| HTMLElement[] \| null`	`null`	Elements to toggle instead of this one.

Outputs

Name	Type	Description
`toggled`	`boolean`	Emits the new state.

Methods

Name	Type	Description
`toggle()`	`void`	Toggles.
`isOn`	`Signal<boolean>`	Whether the class or attribute is set.