Javascript Javascript JavaScript JavaSCRIPT!!

Just been shown how to do the old hiding and showing trick with javascript so that when javascript is turned off the thing shows by default.

simple trick – have a stylesheet that is itself loaded by javascript in the on load method of the dom.

Then you can override a class which has say “display:block” in a base css file with “display:none” in the JS loaded one.

After that you simply do the normal toggling.

A nice adaptation is to change a class name you use :

    if (className.indexOf('js-hider') > -1) {			
        document.getElementById('element-to-hide').className = className.replace('js-hider', 'js-shower');
        console.log(document.getElementById('element-to-hide').className);
        theLink.innerHTML="Hide thing";
    } else {					
        document.getElementById('element-to-hide').className = className.replace('js-shower', 'js-hider');
        theLink.innerHTML = 'Show thing';
    }
Share