Toggle JS

import Toggle from "@natachah/vanilla-frontend/js/_toggle"

Syntax

The toggle component make you able to show/hide some elements by a <button>.

The button must have an aria-controls="IdOfElement", an aria-expanded and a aria-pressed attributes.

html

<button id="toggle" class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
<div id="collapse" tabindex="0" hidden>
    Hello there !
</div>

js

import Toggle from "@natachah/vanilla-frontend/js/_toggle"
const toggles = document.querySelectorAll('.demo-toggle')
if (toggles) toggles.forEach(toggle => new Toggle(toggle))

INFO

The aria-controls can have multiple IDs split by a comma.

Options

By checkbox

The component also work with some form checkbox.

<fieldset>
    <legend>Toggles</legend>
    <input class="demo-toggle" id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
    <label for="cA">Toggle A</label>
    <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
    <label for="cB">Toggle B</label>
</fieldset>

<div id="checkboxA" hidden>Hello there, I'm A !</div>
<div id="checkboxB" hidden>Hello there, I'm B !</div>

By radio

The component also work with some form radio.

<fieldset>
    <legend>Toggles</legend>
    <input id="rA" class="demo-toggle" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
    <label for="rA">Toggle A</label>
    <input id="rB" class="demo-toggle" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
    <label for="rB">Toggle B</label>
    <input id="rC" class="demo-toggle" type="radio" name="radio" value="c">
    <label for="rC">Toggle C</label>
</fieldset>

<div id="radioA" hidden>Hello there, I'm A !</div>
<div id="radioB" hidden>Hello there, I'm B !</div>

By switch

It also work with the switch fields. You can tell when display the element via the data-toggle-when="value" attribute.

<input id="switch" class="demo-toggle" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
<label for="switch">Switch</label>
<div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
<div id="switchB" data-toggle-when="false">This is FALSE</div>

By select

The component also work with <select> and it support the <optgroup>.

<select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
    <option value="null">--</option>
    <option value="A">aaa</option>
    <option value="B">bbb</option>
    <optgroup label="mygroup">
        <option value="C">ccc</option>
        <option value="D">ddd</option>
    </optgroup>
</select>

<div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
<div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
<div id="selectG" data-toggle-when="mygroup" hidden>Hello there, I'm GROUP for C or D !</div>
<div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>

Javascript

Events

Event name	Description	Value
toggle:changed	This event is fired when the value as been changed	-

const myToggle = document.getElementById('myToggle')

myToggle.addEventListener('toggle:changed', () => {
    console.log('It has changed !')
})