bootstrap/site/content/docs/5.1/components/toggler.md

layout, title, description, group, toc

layout	title	description	group	toc
docs	Attribute Toggler	Toggle attributes or classes, using simple html markup	components	true

How it works

Attribute Toggler is a simple component, that preferable can be used to avoid writing small JavaScript snippets handle attributes toggling, during click events. Manipulation id done on the same element or on a targeted element

Heads up! Toggler may handle all attributes, except id's

Examples

Toggle class

Below are some examples of class manipulation

{{< example >}}

Click this card, to change `bg-color`

Click this card, to change `text-color`

{{< /example >}}

Toggle class of another element

Using data-bs-toggle, combined with data-bs-target, can manipulate another element's attribute

{{< example >}} Click me

Click this card, to change `bg-color`

{{< /example >}}

Toggle class of multiple elements

Using data-bs-toggle, combined with data-bs-target, can manipulate another element's attribute

{{< example >}} Click me

Click this card, to change `bg-color`

Click this card, to change `bg-color`

Click this card, to change `bg-color`

{{< /example >}}

Toggle attributes

Below are some examples of attributes manipulation

{{< example >}}

Click this card, to change `hidden` attribute

{{< /example >}}

Toggle attributes of another element

Using data-bs-toggle, combined with data-bs-target, can manipulate another element's attribute

{{< example >}} Click to toggle disabled attribute on fieldset

Input

Disabled select menu Select

Submit

{{< /example >}}

Via data attributes

Toggle

Add data-bs-toggle="toggler" to the element to automatically. The data-bs-target is optional, and attribute accepts a CSS selector to apply the toggler functionality to. Be sure to add the data-bs-attribute and data-bs-value attributes on the toggled element's markup

Via JavaScript

Using this component, programmatically is a bit of redundant, as the initial purpose of it is to avoid use js. However, enable manually with:

var togglerElementList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="toggler"]'))
var togglerList = togglerElementList.map(function (togglerEl) {
  return new bootstrap.Toggler(togglerEl)
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-value="foo".

{{< bs-table "table" >}}

Name	Type	Default	Description
attribute	string	class	The attribute which will be toggled on each click
value	string	null	Allow body scrolling while toggler is open
{{< /bs-table >}}

Methods

You can create a toggler instance using the constructor, for example:

var myToggler = document.getElementById('myToggler')
var bsToggler = new bootstrap.Toggler(myToggler)

{{< bs-table "table" >}}

Method	Description
toggle	Toggles a toggler element chosen attribute
getInstance	Static method which allows you to get the toggler instance associated with a DOM element
getOrCreateInstance	Static method which allows you to get the toggler instance associated with a DOM element, or create a new one in case it wasn't initialized
{{< /bs-table >}}

Events

Bootstrap's toggler class exposes a few events for hooking into toggler functionality.

{{< bs-table "table" >}}

Event type	Description
toggle.bs.toggler	This event fires immediately when the toggle instance method is called.
toggled.bs.toggler	This event is fired when the instance's element attribute has been changed.
{{< /bs-table >}}

var myToggler = document.getElementById('myToggler')
myToggler.addEventListener('toggle.bs.toggler', function () {
  // do something...
})