function openNav() { var showNav = ` #CandleID{ opacity: 0; pointer-events: none; } #uberuns{ pointer-events: auto; opacity: 1; } #buecher{ pointer-events: auto; opacity: 1; } #meinebuecher{ pointer-events: auto; opacity: 1; } #nav-toggle { opacity: 1; pointer-events: auto; } .suchleiste{ opacity: 1; pointer-events: auto; } #buttonID{ opacity: 1; pointer-events: auto; } .suchleiste{ position: fixed; right: 280px; top: 0px; } #buttonID{ position: fixed; right: 240px; top: 0px; } #uberuns{ position: fixed; left: 340px; top: 43px; } #buecher{ position: fixed; left: 340px; top: 96px; } #meinebuecher{ position: fixed; left: 340px; top: 150px; } `; var closeNav = `#CandleID{ opacity: 1; pointer-events: auto; } `; if (document.getElementById('nav-toggle').checked) { var styleSheet = document.createElement("style") styleSheet.innerText = showNav document.head.appendChild(styleSheet) } else { var link = document.createElement('link'); // set the attributes for link element link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; // Get HTML head element to append // link element to it document.getElementsByTagName('HEAD')[0].appendChild(link); var styleSheet = document.createElement("style") styleSheet.innerText = closeNav document.head.appendChild(styleSheet) } } function unset() { var link = document.createElement('link'); // set the attributes for link element link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; // Get HTML head element to append // link element to it document.getElementsByTagName('HEAD')[0].appendChild(link); var styleSheet = document.createElement("style") styleSheet.innerText = closeNav document.head.appendChild(styleSheet) }