Using a Toggle to change the layout of a HTML page

Issue

Right now I have a page layout that is styled with CSS.

On this page there is a toggle that should switch between 2 pages with different content and CSS content (for example there are 2 boxes either side of the toggle that change color dependant on what is selected)

What is the best way to handle this?

Right now I've found a onClick event that should do it like a button, but it doesn't seem to work at all

 changeText(){
    var pageText=document.getElementByID("page1");
    if (pageText.innerHTML === "Some text"){
    pageText.innerHTML = "Swapped Text";
    } else {
    pageTxt.innerHTML = "Some text"
    }

Solution

one way can be to have the content of pages inside two div

and write a function that toggle visibility for different pages based on visibility of other pages

function changePage() {
    var page1 = document.getElementById("page1");
    var page2 = document.getElementById("page2");
    
    page1.style.display = (page1.style.display === 'none') ? 'block': 'none';
    page2.style.display = (page1.style.display === 'none') ? 'block': 'none';
    
}

#page1 {
  display: block;
}

#page2 {
  display: none;
}

<div id="page1">
  the content of page1
</div>

<div id="page2">
  the content of page2
</div>

<button onClick="changePage()">change page</button>

Answered By - jeremy-denis