ON/OFF State Toggle – toggleElement.js

toggleElement.js is a tiny JavaScript library that allows you to trigger a function on the element whenever the toggle state changes.

A typical use of the library is to create a toggle switch to which you can assign any actions depending on the current toggle state.

How to use it:

1. Import the toggleElement.js library into the HTML document.

<script src="toggleElement.js"></script>

2. Add the <toggleable-element /> component to your app.

<toggleable-element id="example">
  Click Me
</toggleable-element>

3. Trigger a function on the element when the state changes.

document.getElementById("example").onstatechange = ()=>{
  console.log(document.getElementById("example").state)
}

4. Apply corresponding CSS styles to the toggleable element.

#example {
  background: blue;
}
#example[state="on"]{
  background: red;
}