Klassen und Attribute per Klick umschalten – allein mit Data-Attributen und dem Bootstrap-JavaScript.

Toggler ist eine reine JavaScript-Komponente, die dir kleine Einweg-Skripte für einfache Interaktionen erspart. Statt eigenen Code zu schreiben, legst du per Data-Attribut fest, welcher Wert bei einem click umgeschaltet wird.

• Klassen umschalten:data-bs-toggle="toggler" plus data-bs-value mit dem Klassennamen.
• Beliebige Attribute: Mit data-bs-attribute schaltest du z. B. hidden oder disabled – alles außer id.
• Fremde Elemente steuern: Über data-bs-target wirkt der Klick auf ein oder mehrere andere Elemente.
• Kein JavaScript nötig: Die Komponente initialisiert sich selbst über die Data-Attribute.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiele

Klasse umschalten

Setze data-bs-toggle="toggler" an das Element und gib in data-bs-value die Klasse an, die umgeschaltet werden soll.

<div class="w-100 p-3 rounded border"
     data-bs-toggle="toggler"
     data-bs-value="fg-danger"
     data-bs-attribute="class">
  Klicken, um `fg-danger` umzuschalten
</div>

Vorhandene Klasse entfernen

Besitzt das Element die Klasse aus data-bs-value bereits, entfernt der erste Klick sie, der nächste fügt sie wieder hinzu.

<div class="w-100 p-3 rounded border bg-subtle-info"
     data-bs-toggle="toggler"
     data-bs-value="bg-subtle-info"
     data-bs-attribute="class">
  Startet mit `bg-subtle-info`. Klicken zum Entfernen.
</div>

Ziel-Element

Mit data-bs-toggle und data-bs-target schaltest du die Klasse eines anderen Elements um.

<button class="btn-solid theme-primary" data-bs-toggle="toggler" data-bs-target="#togglerExample1">Umschalten</button>

<div id="togglerExample1" class="w-100 p-3 rounded border" data-bs-value="bg-2" data-bs-attribute="class">
  Mit dem Button `bg-2` umschalten
</div>

Mehrere Elemente

Gibst du in data-bs-target einen Klassenselektor an, schaltet ein Klick mehrere Elemente gleichzeitig um – jedes mit seinem eigenen Wert.

<button class="btn-solid theme-primary align-self-start"
        data-bs-toggle="toggler" data-bs-target=".togglerExampleClass1">Umschalten</button>

<div class="w-100 p-3 rounded border togglerExampleClass1"
     data-bs-value="bg-subtle-info"
     data-bs-attribute="class">
  Mit dem Button `bg-subtle-info` umschalten
</div>

<div class="w-100 p-3 rounded border togglerExampleClass1"
     data-bs-value="bg-subtle-warning"
     data-bs-attribute="class">
  Mit dem Button `bg-subtle-warning` umschalten
</div>

Attribut umschalten

Mit data-bs-attribute und data-bs-value schaltest du beliebige Attribute um, zum Beispiel hidden:

<div class="w-100 p-3 rounded border"
     data-bs-toggle="toggler"
     data-bs-value="true"
     data-bs-attribute="hidden">
  Klicken, um das Attribut `hidden` umzuschalten
</div>

Ebenso kannst du etwa disabled an einem <fieldset> umschalten und damit alle enthaltenen Formularfelder auf einmal sperren – oder jedes andere Attribut, das dir einfällt.

Verwendung

Per Data-Attribute

data-bs-toggle="toggler" am auslösenden Element aktiviert die Komponente automatisch. data-bs-target ist optional und nimmt einen CSS-Selektor für das zu ändernde Element. Am umgeschalteten Element müssen data-bs-attribute und data-bs-value stehen.

Per JavaScript

Da die Komponente gerade dazu da ist, JavaScript zu vermeiden, ist eine programmatische Nutzung nicht empfohlen. Manuell aktivieren kannst du sie trotzdem:

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

Optionen

Optionen lassen sich per Data-Attribut oder JavaScript übergeben. Bei Data-Attributen hängst du den Optionsnamen an data-bs- an, etwa data-bs-value="foo".

Methoden

Eine Instanz erzeugst du mit dem Konstruktor:

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

Events

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