Menu
Home
Info
Photos
About
This is the information page
There isn't much information yet</p> </span>
<span id="3"> <p>Images go here</p> <!-- Images are also welcome! --> <img width="300px" src="https://projects.codecraftworks.com/web/bTO7kE0ciz009S8bvFFu/assets/Wloph.gif" /> </span> <span id="4"> <p>This is an app template, use it to your liking!</p> </span>300x2 </div> <script> let coll = document.getElementById("collapsemenu"); let menu = document.getElementById("menu"); coll.onclick = function() { if (menu.style.display === "inline-block") { menu.style.display = "none"; } else { menu.style.display = "inline-block"; } }; // This variable is pointing to the screen so it can be changed. let screen = document.getElementById("screen"); // This is a function that updates the screen each time a menu button is clicked. function updatepages(pagenumber) { //First, we check that the selected page exists. if (document.getElementById(pagenumber)) { // Then, the screen is cleared of its content. screen.innerHTML = ""; // Next, page content is copied from the document, based on the id of the span. screen.appendChild(document.getElementById(pagenumber).cloneNode(true)); // Finally, the menu is hidden. menu.style.display = "none"; } } // This updates the screen for the very first time, so we will see the home page at the start. updatepages(1); </script> </body> </html>
