Loading, please wait...

A to Z Full Forms and Acronyms

Program to implement Tabs.

Program to implement Tabs by using javascript to get the data inside of a tab.
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: black;

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;

.tab button:hover {
    background-color: orange;

.tabdata {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;

function openTab(evt, language) {
    var i, tabdata, tablinks;
    tabdata = document.getElementsByClassName("tabdata");
    for (i = 0; i < tabdata.length; i++) {
        tabdata[i].style.display = "none";
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    document.getElementById(language).style.display = "block";
    evt.currentTarget.className += " active";



<p>Click on the buttons to get inside Data:</p>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'HTML')">HTML</button>
  <button class="tablinks" onclick="openTab(event, 'CSS')">CSS</button>
  <button class="tablinks" onclick="openTab(event, 'JavaScript')">JavaScript</button>

<div id="HTML" class="tabdata">
  <p>HTML is used to define the content of web pages.</p>

<div id="CSS" class="tabdata">
  <p>CSS is used to specify the layout of web pages.</p> 

<div id="JavaScript" class="tabdata">
  <p>JavaScript is used to program the behavior of web pages.</p>
A to Z Full Forms and Acronyms

Related Article