Learn how to create toggleable tabs with HTML, CSS, and JavaScript. Elevate your front-end development game.
Table of Contents
Toggleable tabs are a fantastic way to organize and present content on your website in an organized and user-friendly manner. In this tutorial, we'll guide you through the process of creating toggleable tabs using HTML, CSS, and JavaScript.
Toggleable tabs not only enhance user experience but also add a professional touch to your web development skills. By combining these three essential web technologies, you can take your website's user interface to the next level. In this comprehensive guide, we'll provide step-by-step instructions, clear code examples, and best practices to help you master the art of creating interactive tabs. Whether you're a beginner or an experienced developer looking to enhance your skills, this tutorial is designed to empower you with the knowledge and tools needed to implement toggleable tabs effectively.
So, let's dive in and discover how to build engaging and interactive tabs for your web projects. Whether you're designing a portfolio, a blog, or an e-commerce website, toggleable tabs can make a significant difference in how your content is presented and accessed by users. Start creating stunning and user-friendly tabbed content today!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our toggleable tabs.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down each part of the code:
1. <!DOCTYPE html>: This is the document type declaration and specifies that the document is an HTML5 document.
2. <html>: This is the opening tag for the HTML document, enclosing all the HTML content.
3. <head>: This section contains metadata about the document, such as the title, character encoding, and viewport settings.
- <title>: Sets the title of the webpage, which is displayed in the browser's title bar or tab.
- <meta charset="UTF-8" />: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters and symbols.
- <meta name="viewport" content="width=device-width" />: This meta tag defines the viewport settings for responsive design, ensuring that the webpage adapts to the device's screen width.
- <link rel="stylesheet" href="styles.css" />: This line links an external CSS stylesheet named "styles.css" to the HTML document. CSS is used for styling and formatting the webpage.
4. <body>: This section contains the visible content of the webpage.
5. <div class="tab-buttons">: This div element is a container for the tab buttons, which are used to switch between different tabs of content.
- Inside the div, there are three <button> elements, each with a class of "tab-button" and one of them is initially set as "active-tab-button". These buttons represent the individual tabs. The onclick attribute specifies a JavaScript function, toggleTab(), to be executed when the button is clicked, with a different argument for each button to identify which tab to display.
6. <div class="tab" id="tab1">: This div element represents the content of the first tab with the ID "tab1". It is initially visible when the page loads.
- Inside the div, there is an <h2> element displaying "Tab 1 Content" as the heading, and a <p> element with a description of the content for Tab 1.
7. Similar div elements with different IDs ("tab2" and "tab3") represent the content for the other two tabs, with corresponding headings and descriptions.
8. <script src="script.js"></script>: This line includes an external JavaScript file named "script.js" to the HTML document. JavaScript is used to implement the functionality of toggling between tabs.
This is the basic structure of our toggleable tabs using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the toggleable tabs is in place, the next step is to add styling to the tabs using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our tabs.
Let's break down each part of the code:
1. body:
- This section styles the entire body of the web page.
- It sets the background color to a light gray (#eee).
2. .tab-buttons:
- This styles a container element that holds the tab buttons.
- It uses the CSS display property with the value flex to arrange the buttons horizontally in a row.
3. .tab-button:
- This styles individual tab buttons inside the .tab-buttons container.
- It sets the background color of the button to white (#ffffff).
- Removes the border around the button with border: none.
- Adds padding of 10 pixels on the top and bottom and 20 pixels on the left and right to create some space inside the button.
- Changes the cursor to a pointer when hovering over the button.
- Sets a fixed height of 40 pixels for the button.
4. .tab-button:hover:
- This styles the tab button when the mouse pointer hovers over it.
- It changes the background color to a slightly darker gray (#ddd) when the button is hovered.
5. .tab:
- This styles the content that appears when a tab is active.
- It sets the display property to none, which means the content is initially hidden.
- It gives the content a width of 70% of its container.
- Adds padding of 20 pixels around the content.
- Sets the background color to a light gray (#ccc).
6. .active-tab-button:
- This styles the tab button that corresponds to the currently active tab.
- It changes the background color to the same light gray (#ccc) as the tab content.
- Applies a scaling transformation (transform: scaleY(1.1)) to make the button slightly taller (110% of its original height).
- Specifies the transformation origin to be at the bottom of the button (transform-origin: bottom), so it grows upward.
This will give our toggleable tabs an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
background: #eee;
}
.tab-buttons {
display: flex;
}
.tab-button {
background-color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
height: 40px;
}
.tab-button:hover {
background-color: #ddd;
}
.tab {
display: none;
width: 70%;
padding: 20px;
background-color: #ccc;
}
.active-tab-button {
background-color: #ccc;
transform: scaleY(1.1);
transform-origin: bottom;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code defines a function called toggleTab and then immediately calls it with the argument 0. Let's break down what this code does step by step:
1. function toggleTab(tabIndex) { ... }: This line defines a function named toggleTab that takes one parameter, tabIndex. This parameter represents the index of a tab that you want to display as active.
2. var tabs = document.getElementsByClassName("tab");: This line selects all elements with the class name "tab" from the HTML document and stores them in the tabs variable. These elements are typically the content containers for different tabs in a tabbed interface.
3. for (var i = 0; i < tabs.length; i++) { ... }: This is a for loop that iterates through all the elements in the tabs collection. Inside the loop, it sets the display style property of each tab to "none", effectively hiding all of them. This loop is used to hide all tabs before showing the one specified by tabIndex.
4. tabs[tabIndex].style.display = "block";: After hiding all tabs, this line makes the tab at the index specified by tabIndex visible by setting its display style property to "block". This effectively displays the selected tab.
5. var buttons = document.getElementsByClassName("tab-button");: This line selects all elements with the class name "tab-button" from the HTML document and stores them in the buttons variable. These elements are typically the buttons or links that allow users to switch between tabs.
6. for (var i = 0; i < buttons.length; i++) { ... }: Similar to the first loop, this is a for loop that iterates through all the elements in the buttons collection. Inside the loop, it removes the "active-tab-button" class from each button. This class is often used to visually indicate which tab is currently active.
7. buttons[tabIndex].classList.add("active-tab-button");: Finally, after removing the "active-tab-button" class from all buttons, this line adds the "active-tab-button" class to the button at the index specified by tabIndex. This step highlights the button corresponding to the currently active tab, providing a visual indication of which tab is selected.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
function toggleTab(tabIndex) {
let tabs = document.getElementsByClassName("tab");
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
}
tabs[tabIndex].style.display = "block";
// Remove the 'active-tab-button' class from all buttons
let buttons = document.getElementsByClassName("tab-button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("active-tab-button");
}
// Add the 'active-tab-button' class to the clicked button
buttons[tabIndex].classList.add("active-tab-button");
}
toggleTab(0);Final Output:
See the Pen Toggleable Tabs by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Congratulations! You've successfully created toggleable tabs for your website using HTML, CSS, and JavaScript. Experiment with different styles and functionalities to suit your project's needs. These tabs not only enhance user experience but also add a professional touch to your web development skills. Happy coding!
Incorporate these tips and techniques into your web projects to create engaging and user-friendly tabbed content. By combining HTML, CSS, and JavaScript, you can take your website's user interface to the next level. Start experimenting with toggleable tabs today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
