CODEWITHSUNDEEP
javascript
G.A.
G.A.

Reputation: 13

Javascript show/hide, show first div on page load

Can you help me to make the first div show on page load?

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }
    
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}
.tabContent {
    display:none;
}
<a href="#contenuto"><div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div></a>

<a href="#contenuto" ><div tabindex="2" class="tabs"><div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div></a>

<a href="#contenuto"><div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div></a>

<a name="contenuto"><hr></a>

<div id="tabs-1" class="tabContent">
    <p>tab 1</p>
</div>

<div id="tabs-2" class="tabContent">
    <p>tab 2 tab 2 </p>
</div>

<div id="tabs-3" class="tabContent">
    <p>tab 3 tab 3 tab 3</p>
</div>

This is my actual code. jsFiddle Thanks!

Upvotes: 0

Views: 979

Answers (3)

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

Here I am invoking the function (upon page load) that tweaks the css of the desired block; Same can be achieved by $(document).ready; I took this approach to avoid jquery;

window.onload =  showDivOne();

function showDivOne() {
    document.getElementById("tabs-1").style.display = "block";
}

Upvotes: 0

MartinWebb
MartinWebb

Reputation: 2008

I sure can. When you do this kind of stuff best use css. That way when the dom loads the css will kick in and your desired effect will show.

Further more its easier to understand and easier to code up.

.tabContent  {
    display:none;
}
.tabContent.active  {
    display:block;
}

Then in the HTML

<div id="tabs-1" class="tabContent active">

So when the page loads tab one is active

Then in your JS

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 

      tabContents[i].className="tabContent";
    }

    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).className="tabContent active";
}

Updated fiddle!

https://jsfiddle.net/rb5c5095/3/

We could improve things since we know all the tabs will be made invisible at boot up and tab 1 will show. So when a tab is clicked we could just search the tab who has .active class and remove it, then apply the .active class to the new tab. This would have the benefit that any extra css you add in your html markup would not be removed by the JS code, but i reckon you can work that out and if you can't get back to me i can show you :-)

Upvotes: 0

Nax.S
Nax.S

Reputation: 92

You could try running a function when the document is ready.

$(document).ready(function () {  
    showTab("tabs-1");

function showTab(divId) {
    //Get the element
    var divElement= document.getElementbyId(divId);
    //Set the css property  "display" from "none" to be "block";
    divElement..style.display = "block";
}
}):

The function should run once the page has fully loaded. Let me know how it goes.

Upvotes: 1

Related Questions