Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Let’s create a simple vertical tabs component using Tailwind CSS and JavaScript.
Vertical tabs are a great way to organize content on a webpage. They are easy to navigate and can be used to display different sections of content in a single view. They are also a great way to save space on a page and make it more visually appealing.
More Use Cases:
The structure
id="tab1"
: The id of the first tab link, each tab link should have a unique id.href="#tab1"
: The href of the first tab link, this should be the same as the id of the tab content section.id="tab1-content"
: The id of the first tab content section, each tab content section should have a unique id.class="tab-content ..."
: The class of the first tab content section, this should be the same as the id of the tab link.class="tab-content hidden ..."
: The class of the other tab content sections, this shoould have the class hidden
so we can hide them and show them on click.Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial
<div>
<ul>
<li>
<a
id="tab1"
href="#tab1"
class="...">
Tab 1
</a>
</li>
<li">
<a
id="tab2"
href="#tab2"
class="...">
Tab 2
</a>
</li>
<li">
<a
id="tab3"
href="#tab3"
class="...">
Tab 3
</a>
</li>
<li">
<a
id="tab4"
href="#tab4"
class="...">
Tab 4
</a>
</li>
</ul>
<div class="overflow-hidden h-full">
<section
id="tab1-content"
class="tab-content ...">
<p>Content for tab 1</p>
</section>
<section
id="tab2-content"
class="tab-content hidden ...">
<p>Content for tab 2</p>
</section>
<section
id="tab3-content"
class="tab-content hidden ...">
<p >Content for tab 3</p>
</section>
<section
id="tab4-content"
class="tab-content hidden ...">
<p >Content for tab 4</p>
</section>
</div>
</div>
The event listener
document.addEventListener("DOMContentLoaded", () => {
: This is the event listener that will run when the page is fully loaded.const allLinks = document.querySelectorAll("a");
: This line selects all the links on the page.const allTabs = document.querySelectorAll(".tab-content");
: This line selects all the tab content sections on the page.const switchTab = (linkId) => {
: This function will be called when a tab link is clicked.The switchTab function
allTabs.forEach((tab) => {
: This line loops through all the tab content sections and hides them.tab.classList.toggle("hidden", tab.id !==
${linkId}-content);
: This line shows or hides the tab content section based on the link id.The handleTabClick function
event.preventDefault();
: This line prevents the default behavior of the link, which is to navigate to the href of the link.const linkId = event.target.id;
: This line gets the id of the clicked tab link.allLinks.forEach((link) => {
: This line loops through all the tab links and changes their classes based on the link id.const isCurrentLink = link.id === linkId;
: This line checks if the clicked tab link is the current link.link.classList.toggle("bg-neutral-100", isCurrentLink);
: This line changes the background color of the clicked tab link based on if it is the current link.link.classList.toggle("text-blue-600", isCurrentLink);
: This line changes the text color of the clicked tab link based on if it is the current link.link.classList.toggle("text-neutral-400", !isCurrentLink);
: This line changes the text color of the clicked tab link based on if it is not the current link.});
: This line closes the for loop.switchTab(linkId);
: This line calls the switchTab function with the id of the clicked tab link.The event listener
allLinks.forEach((link) => {
: This line loops through all the tab links and adds an event listener to them.link.addEventListener("click", handleTabClick);
: This line adds an event listener to the tab links that calls the handleTabClick function when clicked.The current hash
const currentHash = window.location.hash;
: This line gets the current hash from the URL.const activeLink = currentHash ? document.querySelector(
a[href=”${currentHash}“]) : document.querySelector("a");
: This line selects the active tab link based on the current hash.handleTabClick({ target: activeLink });
: This line calls the handleTabClick function with the active tab link as the argument.document.addEventListener("DOMContentLoaded", () => {
const allLinks = document.querySelectorAll("a");
const allTabs = document.querySelectorAll(".tab-content");
const switchTab = (linkId) => {
allTabs.forEach((tab) => {
tab.classList.toggle("hidden", tab.id !== `${linkId}-content`);
});
};
const handleTabClick = (event) => {
event.preventDefault();
const linkId = event.target.id;
allLinks.forEach((link) => {
const isCurrentLink = link.id === linkId;
link.classList.toggle("bg-neutral-100", isCurrentLink);
link.classList.toggle("text-blue-600", isCurrentLink);
link.classList.toggle("text-neutral-400", !isCurrentLink);
});
switchTab(linkId);
};
allLinks.forEach((link) => {
link.addEventListener("click", handleTabClick);
});
const currentHash = window.location.hash;
const activeLink = currentHash
? document.querySelector(`a[href="${currentHash}"]`)
: document.querySelector("a");
handleTabClick({ target: activeLink });
});
In this tutorial, we learned how to create vertical tabs using Tailwind CSS and JavaScript. We created a simple vertical tabs component that allows users to switch between different sections of content. We also learned how to use event listeners and classes to handle the tab clicks and show or hide the tab content sections. This is a basic example of how to create a vertical tabs component using Tailwind CSS and JavaScript, but you can customize it to fit your specific needs. Remember to make it accessible and responsive for different screen sizes.
Hope you enjoyed this tutorial and have a nice day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!