 |
| Multiple tabs using html css js |
In this article, we given a Multiple tabs using html css js with source code as a project. Multiple tabs are used to switch the multiple sections on single webpage for more information. In this project, we created a responsive design of multiple tabs to use in website to add multiple sections. we given source code to add multiple tabs/sections on single webpage using html, css and js.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Multiple tabs using html css js. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Multiple-tabs.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Multiple tabs using html css js source code
Here we given a html, css and js source code of Multiple tabs project as given -
HTML
In HTML, we created a structure by adding div tags. In div tags, we added buttons for multiple tabs and given a function to add functionality with js. In the section, we added a content as heading and paragraph. Linked css and js file for styling and functionality in html code. Copy the given html code and paste it into index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple tabs</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="tabs"> <button class="tablink active" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablink" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablink" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent active"> <h3>Tab 1</h3> <p>This is the content of tab 1</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2</h3> <p>This is the content of tab 2</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3</h3> <p>This is the content of tab 3</p> </div> <script src="script.js"></script> </body> </html>
CSS
We added a position and styling to the project with css. Added a colors and border to the element. Also, added a advanced properties for content. Copy the given css code and paste it into style.css file.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.tabs {
overflow: hidden;
background-color: #ddd;
}
.tablink {
float: left;
cursor: pointer;
padding: 10px 20px;
transition: background-color 0.3s;
}
.tablink.active {
background-color: #f0f0f0;
}
.tabcontent {
display: none;
padding: 20px;
border-top: 1px solid #ccc;
}
.tabcontent.active {
display: block;
}
html {
scroll-behavior: smooth;
}Javascript
In javascript, we added a functionality to switch multiple tabs with the functions. Added a display none and block property to show the sections when we click at any sections. Copy the given js code and paste it into script.js file.
function openTab(evt, tabName) {
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
var tablinks = document.getElementsByClassName("tablink");
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}Output
Check this output of Multiple tabs project -
Also see this -
Hope this helps you to know about Multiple tabs using html css js with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects