How to start off on a tab built in javascript/html instead of it being blank and having to click on one

Tags: javascript,html,css,tabs

Problem :

Hello i have a tab system built in javascript/html and css currently it only displays anything if you click on it first but i was wondering if i could make tab content automatically show up when the page is loaded and the sidebar is opened here is the code that makes my sidebar work

function openTab(evt, tabName) {
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(tabName).style.display = "block";
evt.currentTarget.className += " active";

here is the site i am currently working on if you want to see how the tabs behave

And here is my css

list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006666;
width: 100%:


/* Float the list items side by side */
#tab-li {
float: left;
background: #006666;
border-top: 1px solid #006666;


/* Style the links inside the list items */
a#tab-li a {
display: inline-block;
color: black;
text-align: center;
padding-left: 7px;
padding-right: 6px;
text-decoration: none;
transition: 0.3s;
font-size: 14px;

 /* Change background color of links on hover */
#tab-li a:hover {
background-color: #006666;


/* Create an active/current tablink class */
#tab-li a:focus, .active {
background-color: darkcyan;

/* Style the tab content */
.tabcontent {
display: none;


Solution :

Find this particular html

<div id="chatrooms" class="tabcontent">

change it to:

<div id="chatrooms" class="tabcontent" style="display: block;">

This should work for you. As I look in F12 tools I can't see class being changed on click, just the style property

For hightligh locate:

<a href="#" class="tablinks" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

Change to:

<a href="#" class="tablinks active" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

Note that active class should follow after "tablinks" class because your javascript is replacing " active" including whitespace

    CSS Howto..

    How to hide text without ID?

    How to append a CSS rule to the another CSS rule

    How to implement CSS file style on selected div

    How to horizontally center a link element with CSS?

    CSS How To: Easily make all rules check for 1 ancestor

    How to figure a text box set of characters into a text box figure 2 effect?

    How to capitalize first line with css? ::first-line psuedo-element CSS not working

    How do I divide all margins but last to even out space?

    CSS3 Menu Layout and Gradient not showing

    How to use css styling in html with multiple directories?

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    css selector question, how to change font colover of parent li when child ul is focused

    How to make a div scroll able when window height is reached

    CSS How to hide text after a span

    How can I get my drop-down to not open unless the li is hovered?

    How to get sourcemaps working for React Css Modules?

    How to make a simple pure css or jquery image toggle?

    How to use a Video as text background in css

    How to add Video from project directory in the background of Div

    How to add overflow : hidden and max widths on images

    How to style my HTML form using CSS

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How can I use themeroller'ed styles in “regular” parts of a page?

    How to create a sub folder on Page?

    HTML / CSS: How to make the content follow the footer?

    How to keep CSS from render-blocking my website?

    How to send an HTML file with css?

    How can I add CSS animation to an element on a web page? [closed]

    How to I create two containers with different backgrounds? [duplicate]

    How to get a div positioned at the bottom of a table