How to make a tab bar with buttons

The project: Tabs

Tabs; a good way to separate the content into visibly different "pages", or sections.
To build a tabrow, with separate buttons as tabs, takes some HTML and Javascript mainly.
As you see here above, there is a tab for each web building langauge used in making these Tabs.
To add a button to the tabrow is simple, just add this HTML snippet and you are going good:
Here is how you make them..

<button class="tablinks" onclick="openlanguage(event, 'PHP')">PHP</button>

To change the look and feel of your tabs, use some CSS styling. If you need inspiration, go look at the CSS code section, here on https://dev.webpages.dk/

An alternative to these tabs can be "Collapsibles". Where you also can separate the content into different "containers". I have a good example of how you can create and use collapsibles elsewhere here on the webdeveloping webpages.

HTML


<DIV class="tabborder">
<button class="tablinks" onclick="openlanguage(event, 'source')">Project: Tabs</button>

<button class="tablinks" onclick="openlanguage(event, 'HTML')">HTML</button>

<button class="tablinks" onclick="openlanguage(event, 'CSS')">CSS</button>

<button class="tablinks" onclick="openlanguage(event, 'Javascript')">Javascript</button>

</DIV>

CSS


.tablinks {
    background-color:#FFFFFF;
    border-top:2px solid #000000;
    border-left:2px solid #000000;
    border-right:2px solid #000000;
    border-bottom:none;
    border-radius:0px 10px 0px 0px;
}
.tabborder{
    border-bottom:2px solid #000000;
}

Javascript


function openlanguage(evt, openlanguage) {

var i, tabcontent, tablinks;



tabcontent = document.getElementsByClassName("tabcontent");



for (i = 0; i < tabcontent.length; i++) {

tabcontent[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(openlanguage).style.display = "block";

evt.currentTarget.className += " active";

}