Nicholas Hendricks Nicholas Hendricks - 1 year ago 77
CSS Question

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

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;


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download