elements with class=”tabcontent” are hidden by default (with CSS & JS). When the user clicks on a button – it will open the tab content that “matches” this button. Step 2) Add CSS: Style the buttons and the tab content: Example /* Style the tab buttons */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* Change background color of buttons on hover */ .tablink:hover { background-color: #777; } /* Set default styles for tab content */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;} ADVERTISEMENT ADVERTISEMENT Step 3) Add JavaScript: Example function openCity(cityName, elmnt, color) { // Hide all elements with class=”tabcontent” by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName(“tabcontent”); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = “none”; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName(“tablink”); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = “”; } // Show the specific tab content document.getElementById(cityName).style.display = “block”; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id=”defaultOpen” and click on it document.getElementById(“defaultOpen”).click(); Tip: Also check out How To – Tabs. ADVERTISEMENT NEW We just launched W3Schools videos Explore now COLOR PICKER colorpicker Get certified by completing a course today! w3schools CERTIFIED . 2022 CODE GAME Code Game