A front-end developer often has to code scripts for interface components. Components such as drop-downs, navigation buttons, tooltips, expandable panels, lightboxes, tabs, etc.
The thing is… Most of these components expose a recurrent behavior: a trigger element toggles the state of one or more target elements. So why not code this behavior once and for all?
So here is a solution: a simple script to toggle the state of a trigger element with a CSS class. You can then associate this element with one or more others: let’s call them targets. By adding the right HTML attributes, it can adapt to any contexts and behave like a chosen component.
Only focus on adjusting the rest with your CSS creativity.
Several quick start options are available:
Easy Toggle State’s full documentation is hosted on GitHub Pages at twikito.github.io/easy-toggle-state/.
git clone https://github.com/twikito/easy-toggle-state.git
npm run build
Source Code: https://github.com/Twikito/easy-toggle-state