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';
}
Subscribe