How to Create Horizontal and Vertical Tabs using JavaScript ? - GeeksforGeeks

18 Nov, 2020
Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs and their content in paragraphs. The styling is performed using CSS. On the click of each tab button, the tabs display their respective content. This is done using JavaScript.
Horizontal Tabs: The following code demonstrates the simple HTML structure with tabs and its contents in the form of a paragraph. On click of each tab, it calls the displayContent() method implemented in the “script.js” file given below.
HTML Code: 
HTML
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script></head>  <body>    <h2 style="color:green">        GeeksforGeeks Horizontal tabs    </h2>      <!-- Link to each tab with onclick event -->    <div id="tabsDiv">        <button class="linkClass" onclick=            "displayContent(event, 'interview')">            Interview        </button>          <button class="linkClass" onclick=            "displayContent(event, 'practice')">            Practice        </button>          <button class="linkClass" onclick=            "displayContent(event, 'python')">            Python        </button>          <button class="linkClass" onclick=            "displayContent(event, 'algorithms')">            Algorithms        </button>          <button class="linkClass" onclick=            "displayContent(event, 'machine')">            Machine Learning        </button>    </div>      <!-- Content for each HTML tab  -->    <div id="interview" class="contentClass">        <h3>Interview</h3>          <p>            Also, in Asymptotic analysis, we always            talk about input sizes larger than a            constant value. It might be possible            that those large inputs are never given            to your software and an algorithm which is            asymptotically slower, always performs            better for your particular situation.            So, you may end up choosing an algorithm            that is Asymptotically slower but faster            for your software.        </p>      </div>      <div id="practice" class="contentClass">        <h3>Practice</h3>          <p>            Asymptotic Analysis is the big idea            that handles above issues in analyzing            algorithms. In Asymptotic Analysis,            we evaluate the performance of an             algorithm in terms of input size (we             don’t measure the actual running time).            We calculate, how does the time            (or space) taken by an algorithm            increases with the input size.        </p>      </div>      <div id="python" class="contentClass">        <h3>Python</h3>          <p>            Python is a high-level, general-purpose            and a very popular programming language.            Python programming language (latest Python 3)            is being used in web development, Machine            Learning applications, along with all            cutting edge technology in Software Industry.            Python Programming Language is very well            suited for Beginners, also for experienced            programmers with other programming languages            like C++ and Java.        </p>    </div>      <div id="algorithms" class="contentClass">        <h3>Greedy Algorithms</h3>          <p>            Greedy is an algorithmic paradigm that            builds up a solution piece by piece,            always choosing the next piece that            offers the most obvious and immediate            benefit. So the problems where            choosing locally optimal also            leads to global solution are            best fit for Greedy.        </p>    </div>      <div id="machine" class="contentClass">        <h3>Machine Learning</h3>          <p>            Machine Learning is the field of            study that gives computers the capability            to learn without being explicitly            programmed. ML is one of the most            exciting technologies that one            would have ever come across.            As it is evident from the name,            it gives the computer that makes            it more similar to humans:            The ability to learn. Machine learning            is actively being used today,            perhaps in many more places than            one would expect.        </p>    </div></body>  </html>
CSS Code: The following code is of the “style.css” file that is used for the styling of the page and the tabs.
css
<style>    h3 {        text-align: left;    }      /* Button to open the content */    .linkclass {        float: left;        cursor: pointer;        padding: 10px 15px 10px 10px;        background-color: light-grey;    }      /* Button styling on mouse hover */    #tabsDiv a:hover {        color: black;        background-color: #e9e9e9;        font-size: 16px;    }      /* Change the color of the button */    button.active {        background-color: #c0c0c0;    }      /* Content for button tabs*/    .contentClass {        display: none;        padding: 10px 16px;        border: 2px solid #c0c0c0;    }</style>
JavaScript Code: The following code contains the functionality of tabs using JavaScript.
Javascript
function displayContent(event, contentNameID) {      let content =        document.getElementsByClassName("contentClass");    let totalCount = content.length;      // Loop through the content class    // and hide the tabs first    for (let count = 0;        count < totalCount; count++) {        content[count].style.display = "none";    }      let links =        document.getElementsByClassName("linkClass");    totalLinks = links.length;      // Loop through the links and    // remove the active class    for (let count = 0;        count < totalLinks; count++) {        links[count].classList.remove("active");    }      // Display the current tab    document.getElementById(contentNameID)        .style.display = "block";      // Add the active class to the current tab    event.currentTarget.classList.add("active");}
Output:  
Vertical Tabs: The tabs can be made vertical by changing the HTML structure and replacing the CSS stylesheet with a modified one used for the vertical tabs design. The following code demonstrates the vertical tabs.
HTML code: 
HTML
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="vstyle.css">    <script src="script.js"></script></head>  <body>    <h2 style="color:green">        GeeksforGeeks Vertical tabs    </h2>      <div id="tabsDiv">        <div id="interview" class="contentClass">            <h3>Interview</h3>              <p>                Also, in Asymptotic analysis,                we always talk about input sizes larger                than a constant value. It might                be possible that those large inputs                are never given to your software and                an algorithm which is asymptotically                slower, always performs better for                your particular situation. So, you                may end up choosing an algorithm that                is Asymptotically slower but faster                for your software.            </p>        </div>          <div id="practice" class="contentClass">            <h3>Practice</h3>              <p>                Asymptotic Analysis is the big idea                that handles above issues in analyzing                algorithms. In Asymptotic Analysis, we                evaluate the performance of an algorithm                in terms of input size (we don’t measure                the actual running time). We calculate,                how does the time (or space) taken by                an algorithm increases with                the input size.            </p>        </div>          <div id="python" class="contentClass">            <h3>Python</h3>              <p>                Python is a high-level, general-purpose                and a very popular programming language.                Python programming language (latest Python 3)                is being used in web development, Machine                Learning applications, along with all                cutting edge technology in Software Industry.                Python Programming Language is very                well suited for Beginners, also for                experienced programmers with other                programming languages like C++ and Java.            </p>        </div>          <div id="algorithms" class="contentClass">            <h3>Greedy Algorithms</h3>              <p>                Greedy is an algorithmic paradigm                that builds up a solution piece by                piece,always choosing the next piece                that offers the most obvious and                immediate benefit. So the problems                where choosing locally optimal also                leads to global solution are best                fit for Greedy.            </p>        </div>          <ul class="ulClass" style="height:300px">            <li style="list-style-type:none;">                <button class="linkClass" onclick=                    "displayContent(event, 'interview')">                    Interview                </button>            </li>                          <li style="list-style-type:none;">                <button class="linkClass" onclick=                    "displayContent(event, 'practice')">                    Practice                </button>            </li>              <li style="list-style-type:none;">                <button class="linkClass" onclick=                    "displayContent(event, 'python')">                    Python                </button>            </li>              <li style="list-style-type:none;">                <button class="linkClass" onclick=                    "displayContent(event, 'algorithms')">                    Algorithms                </button>            </li>        </ul>    </div></body>  </html>
CSS Code: The below code is the modified CSS code for the vertical tabs display.
css
<style>    * {        box-sizing: border-box;    }      #tabsDiv {        height: 300px;        border: 2px solid #c0c0c0;    }      #tabsDiv ul {        height: 300px;        padding: 0px 5px;    }      #tabsDiv li {        width: 15%;        height: 60px;    }      #tabsDiv button {        float: left;        border: 1px solid #c0c0c0;        background-color: #f1f0f4;    }      /* Button to open the content */    #tabsDiv button {        display: block;        background-color: inherit;        color: black;        padding: 25px 15px;        width: 100%;        text-align: left;        cursor: pointer;    }      /* Button styling on mouse hover */    #tabsDiv button:hover {        background-color: #d1d1d1;        color: lime;    }      #tabsDiv button.active {        background-color: #c0c0c0;    }      /* Content for tabs*/    .contentClass {        display: none;        position: absolute;        left: 18%;        padding: 0px 15px;        width: 70%;        border-style: none;        height: 300px;    }</style>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?