CODE SNIPPET: Simple Tab Toggles!
This is a little code I threw together to be able to make pain-free tabs and toggles for themes and websites without any fuss and without using larger frameworks like Bootstrap, and since it's pretty easy to use and could be of use to others, I decided to share it!
This snippet can be used both in Tumblr themes and other websites such as Neocities.
↓↓ INSTALLATION AND TUTORIAL UNDER THE CUT! ↓↓
STEP 1: INSTALLATION
In your website/theme code, above </body> paste the following code:
<script src="https://static.tumblr.com/etun7kp/YlKtdhxc2/pandappuccino_simpletabtoggle.js"></script>
This loads the script into the theme and initializes everything once the page loads.
STEP 2: SET UP THE TABS
Create a container that will hold the tabs. You can either use a set height/width combined with overflow: hidden to keep the container from messing with the page layout, or set them to height: auto if you don't mind the size changing.
Inside this container, put as many tabs as you want. Make sure they have the "tab" class, and for whatever tab is meant to show on load, include the "active" class. You can style the tabs however you want from there, such as padding and the like. The code includes a preloaded <style> section that adds basic formatting.
Give each tab a unique ID (such as "#TAB1" or "#HOME"). This will be referenced by the toggles.
STEP 3: SET UP THE TOGGLES
This code is flexible to allow anything to be used as a toggle: a button, an image, a <div>, a link, whatever, as long as it includes the proper classes and two custom data attributes. You can style it as you desire, as well.
Set up whatever you want to use as the toggles, giving them the "toggle" class. Make sure whatever toggle corresponds to the active tab also includes the "active" class.
When setting up the toggle, make sure to include the custom attributes data-tab="" and data-tab-toggle="". The first attribute identifies the toggle itself, while the second targets the tab. Make sure that data-tab-toggle="" includes the # sign (such as data-tab-toggle="#TAB1") or the code WILL NOT WORK!
<button class="toggle active" data-tab="1" data-tab-toggle="#HOME">Home</button>
STEP 4: CUSTOMIZING THE TOGGLE
Your toggles can be customized to have a visible indicator that they are "active" using specified CSS selectors! For the example above, styling button.active (or, if you really want to be specific, button.toggle.active) would cause the button's design to change only if it was toggled.
HOW IT WORKS
Under the hood, the script is pretty basic, and was mainly just me testing if I could do it. For those who want to know how it works or are skeptical on the function, here's a quick guide! Step by step from the top of the code to the bottom, it performs the following actions:
The code creates a custom <style> element.
The code adds standardized rules for the tab and toggle elements, along with a simple fading animation. These standardized rules hide inactive tabs by setting them to display: none and showing active tabs with display: block!important to override, set the tabs to 100% of their container element's height and width, and sets the tabs to have overflow: auto for scrolling.
The code inserts the new <style> element into the page <head>.
The code initializes four variables: tabs, btns, activeToggle, and activeTab, and creates arrays of all tabs (checking for the ".tab" class) and toggles (checking for the ".toggle" class).
The code uses the forEach() function to add an event listener that calls the main function of the code when clicking on a toggle.
The code sets up the actual function, toggleTab(). The function first uses forEach() to remove the "active" class from the tabs and toggles. Then, it checks the values of the toggle that was clicked on and uses them with the activeToggle and activeTab variables; activeToggle lets the function select the toggle that was clicked. Afterwards, it applies the proper classes to the tab and toggle to change tabs.