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

#tab-ul{
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-bottom:12px;
padding-top:12px;
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 route arrow from right to down css

    jquery - How to determine if a div changes its height or any css attribute?

    How does the following line of JavaScript work?

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How to make a background header image extend to full width of browser

    CSS: How to set minimum and maximum height according to inside?

    CSS animations - How to toggle direction with one keyframes declaration

    How to hide a class on specific page using css

    How can I set a CSS property on the html element with jQuery?

    How to make an ad wrapper which displays a message if a user has adblock running?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How do I stop the FLOAT (without extra markup)?

    Button Built in CSS showing different font color in FF and Webkit

    How to set a div over a div using css?

    How to create hidden pop out side menu

    How to remove left and right margin on first and last div

    How can I force an outer div to expand to height of inner div?

    why image show space and go right, it should be fill up the gap

    CSS float: how to form the second row based on tallest DIV?

    How to remove space above and below the in-line block elements?

    drupal themes: how do I include several css files / js files on my theme's .info file?

    How to prevent table row from re-sizing when hidden text is displayed?

    How to capture a CSS multiline comment block with JavaScript regex

    how to add inline css to rails link_to helper

    How to create shadow in JSF input field

    How to show an image on html page using only css?

    Show container only if text inside it

    How can I add a transition effect when opening my custom modal window?

    How to display thick line under header of sub menu using css

    How to load local copy of bootstrap css when the cdn server is down?