Question

I have make a hide/show button for my site’s header, but I have this “issue”. If user load my site for first time, or after refresh, this button needs to click two times for work. But only for the first time. Then it works normally! Any idea why is this happening?

Live example at the comment below. Thank you in advance!!!

Answer 1

The js code is:

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block')
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}

if you alert the value of sheader_1 the first time you load the page, result is an empty string, so your code won’t do anything (it will jump to the else statement).

One way to make it work would be:

function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
//here we also check if display property is empty
if (sheader_1.style.display == 'block' || sheader_1.style.display == '') 
     sheader_1.style.display  = 'none', 
     sheader_2.style.display  = 'block';
else  sheader_1.style.display  = 'block', 
     sheader_2.style.display  = 'none';
     ;}