Menu
Home
Info
Photos
About
Home Screen
Made by:Seth
My app is so cool!
/ </span> <span id="2"> <!-- You can even use CSS! --> <p style="color:Blue;">This is the information page</p> <!-- Experiment with IDs and Classes too! --> <p id="Have fun">There isn't much information yet! <!-- Images are also welcome! --> <img width="500" <img width="300px" src="" />. </span> <span id="3"> <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>
