https://dev.webpages.dk/  
 
About CSS How to make TABS
How to make TABS:

This is an example of using the HTML 'Buttons'.
We here build a row of tabs, that shows different content when the separate buttons are clicked.
You can easily add buttons by adding more lines in the HTML code you find here.
I use this very code on all the pages here on the https://dev.webpages.dk/
In this example we don't use PHP, so that button have been left out. But the site generally presents code in the different web developing languages; HTML, CSS, Javascript and PHP.

 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";
}

 PHP

Icons made by Freepik from www.flaticon.com This page is about how to make buttons look like a tabrow using HTML, CSS and Javascript. You can style this further to suit you
03:34:54