Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Multiple Tabs In Single Page Using JavaScript And CSS.

Thursday, Sep 28, 2017

Tags:- JavaScript CSS HTML


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 .In this tutorial we will show you how to create multiple tabs in single page using JavaScript and CSS.You may also like Multistep Form With Progress Bar Using jQuery And CSS


See Demo
Multiple Tabs In a Single Page


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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.