#js toggle

so like i'll write something better later on, but quick explanation time:

in most javascript/css/html tabs, you need to change the name of tabs for every single occurrence of that template on a single page. this is because they generally work on a click & target based function. in other words, when you click 'x', it responds by changing 'id'. but if you have multiple instances of 'id', it'll just refer to the first instance and malfunction for the rest. as such, you have to make sure 'id' is unique for every instance of the same template.

kind of a pain in the ass.

this is a vanilla js script (so no worries about having to install jquery or anything else) that uses tree traversal to denote active containers rather than an entire page search. how this practically works is find the closest parent to 'x' and filters its search to confine to that parent.

it's a heck of a lot less complicated than it sounds, and it's really simple to use, i'm just a constipated rat. now, i know there's a js script that performs the same function, but it's actually really strict about how you structure the html, so i made this script in order to get around having to completely recode a pre-existing template. in terms of installation, stick this code at the very bottom:

<script src="https://codepen.io/breezescodes/pen/XWdymYM.js"></script><script>localT4({ outerName: '#outerName', tabClassName: '.tabClassName', contClassName: '.contClassName', toggle:''});</script>

you need to plug names into outerName, tabClassName, and contClassName. please avoid using any hyphens(' - ') in your naming. if you already have them, replace em with underscores (' _ '). script has a tendency to break with hyphens. it’s fine with most of your html, but the specific ones that you replace in the localT4(…) can’t have hyphens in them.

outerName needs to be replaced with the name of an id or class for an element that surrounds the entire template. it’s simply there to act as a sort of filter, so it doesn’t need any special coding aside from having an id or class and being around the entire enchilada.

tabClassName needs to be the name of a common class applied to all your tabs.

contClassName needs to be the name of a common class applied to all your containers.

toggle denotes if you're using my localT4 script as a tab or toggle. false obviously means tabs, true means toggles. the difference is a panel of buttons (tabs) vs a switch (toggle).

what this script will do is apply outerName_active to the tab that you clicked and the corresponding container. you can use .tabClassName.outerName_active { css } and .contClassName.outerName_active { css } to style your elements.

in order to set a default tab on load, add outerName_active to the class of the button + container that you want default.

basically the only requirements are:

you have a parent element with an id or class

your tabs share a common class name

your containers share a common class name

none of the above include hyphens. instead, use underscores.

the tabs that you’re using do actually need to be in order with your containers. i have a version where that isn’t necessary, and it’s not too much more complicated than css radio tabs (a little less complicated tbh), so if you really need it, i can send it over, but otherwise yeah.

if you need any help, please feel free to reach out to me through dms/asks.

LIVE EXAMPLE: codepen link