zzzzzz My Level JavaScript HTML CSS tabs

/* Function to add style element */ function addStyle(styles) { /* Create style document */ var css = document.createElement('style'); css.type = 'text/css'; if (css.styleSheet) css.styleSheet.cssText = styles; else css.appendChild(document.createTextNode(styles)); /* Append style to the tag name */ document.getElementsByTagName("head")[0].appendChild(css); } /* Set the style */ var styles = "\ .tab {\ overflow: hidden;\ border: 1px solid #ccc;\ background-color: #f1f1f1;\ }\ \ /* Style the buttons that are used to open the tab content */\ .tab button {\ background-color: inherit;\ float: left;\ border: none;\ outline: none;\ cursor: pointer;\ padding: 14px 16px;\ transition: 0.3s;\ }\ \ /* Change background color of buttons on hover */\ .tab button:hover {\ background-color: #ddd;\ }\ \ /* Create an active/current tablink class */\ .tab button.active {\ background-color: #ccc;\ }\ \ /* Style the tab content */\ .tabcontent {\ display: none;\ padding: 6px 12px;\ border: 1px solid #ccc;\ border-top: none;\ }"; /* Function call */ window.onload = function() { addStyle(styles) }; function goToTab(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } <!-- London --> // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();