As indicated by the tags on your posts, you are using jQuery. So, try the following:

First, add the display: none style to all elements that should be hidden at the beginning. You can for convenience use a hidden class.

.hidden {
  display: none;
}

Then, add an onclick event to the button that hides the button and reveals all previously hidden elements.

$("start__button").on("click", function() {
  $(this).hide();
  $(".hidden").show();
});

const mainButton = document.getElementById("start__button").addEventListener("click", function(event){
        document.getElementById("navbar").classList.toggle("hidden");
    });

.hidden{
  display:none;
}

<navbar id="navbar">My navbar body....</navbar>
<button id="start__button">My Button</button>

This might help you
By the classList.toggle() function, you can toggle the class of the navbar or any other html element on clicking the button and after that using simple css, you can not only hide or show the element but also do other changes
Removing the whole element from the document and then again adding it by element.innerHTML = "..." is not recommended Thanks.

You can group all of the content you want to show after click in a wrapper element.

const mainButton = document.getElementById("start__button");

mainButton.addEventListener("click", function(event){
    this.remove();
    document.querySelector('main').classList.remove('hidden')
});

.hidden {
  display: none;
}

main > * {
  padding: 1rem;
}

nav, footer {
  background: black;
  color: #fff;
}

<button id="start__button">start</button>
<main class="hidden">
  <nav>Navigation</nav>
  <section>Content</section>
  <footer>Footer</footer>
</main>