✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Multiple Tabs In Single Page Using JavaScript And CSS

Last Updated : Jul 1, 2023

IN - JavaScript CSS HTML | Written & Updated By - Riya

In this tutorial we will show you how to create multiple tabs in single page using JavaScript and CSS, tabs is a great way to present the content in front of the user not only it looks nice but also saves the website space and it works just like visiting multiple pages content.

You may also like Multistep Form With Progress Bar Using jQuery And CSS

Multiple Tabs In Single Page Using JavaScript And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Multiple Tabs it takes only two steps:-

  1. Make a HTML file and define markup and script for Multiple Tabs
  2. Make a CSS file and define styling for Multiple Tabs

Step 1. Make a HTML file and define markup and script for Multiple Tabs

We make a HTML file and save it with a name tabs.html 

<html>
<head>
<link rel="stylesheet" type="text/css" href="tabs_style.css">
<script>
 function change_tab(id)
 {
   document.getElementById("page_content").innerHTML=document.getElementById(id+"_desc").innerHTML;
   document.getElementById("page1").className="notselected";
   document.getElementById("page2").className="notselected";
   document.getElementById("page3").className="notselected";
   document.getElementById(id).className="selected";
 }
</script>
</head>
<body>

<div id="main_content">

 <li class="selected" id="page1" onclick="change_tab(this.id);">Page1</li>
 <li class="notselected" id="page2" onclick="change_tab(this.id);">Page2</li>
 <li class="notselected" id="page3" onclick="change_tab(this.id);">Page3</li>
 
 <div class='hidden_desc' id="page1_desc">
  <h2>Page 1</h2>
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS. 
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
 </div>

 <div class='hidden_desc' id="page2_desc">
  <h2>Page 2</h2>
  Hello this is Page 2 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
 </div>
 
 <div class='hidden_desc' id="page3_desc">
  <h2>Page 3</h2>
  Hello this is Page 3 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS. 
  Hello this is Page 3 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
 </div>
 
 <div id="page_content">
  <h2>Page 1</h2>
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS. 
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
  Hello this is Page 1 description and this is just a sample text .This is the demo of Multiple Tab In Single Page Using JavaScript and CSS.
 </div>
 
</div>
 
</body>
</html>

In this step we make three tabs and display the tabs whenever user clicks on their respective label.We create a javascript function to replace tab content to the one clicked by the user and change the style classes.

You may also like Change All Elements Design In A WebPage Using JavaScript And CSS

Step 2. Make a CSS file and define styling for Multiple Tabs

We make a CSS file and save it with name tabs_style.css 

body
{
 background-color:#2E3B0B;
 margin:0px auto;
 padding:0px;
 font-family:helvetica;
 height:2000px;
}
h1
{
 text-align:center;
 font-size:35px;
 margin-top:60px;
 color:#BEF781;
}
h1 p
{
 text-align:center;
 margin:0px;
 font-size:18px;
 text-decoration:underline;
 color:white;
}
#main_content
{
 margin-top:50px;
 width:500px;
 margin-left:250px;
}
#main_content li
{
 display:inline;
 list-style-type:none;
 background-color:#688A08;
 padding:10px;
 border-radius:5px 5px 0px 0px;
 color:#292A0A;
 font-weight:bold;
 cursor:pointer;
}
#main_content li.notselected
{
 background-color:#688A08;
 color:#292A0A;	
}
#main_content li.selected
{
 background-color:#D0F5A9;
 color:#292A0A;	
}
#main_content .hidden_desc
{
 display:none;
 visibility:hidden;
}
#main_content #page_content
{
 background-color:#D0F5A9;
 padding:10px;
 margin-top:9px;
 border-radius:0px 5px 5px 5px;
 color:#2E2E2E;
 line-height: 1.6em;
 word-spacing:4px;
}

In this step we define styling for multi tabs.Thats all, this is how to Create Multiple Tabs In Single Page Using JavaScript And CSS.

You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on html tabs using javascript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪