Hides sections on page load, shows on anchor click

by Laberwurschd

HTML

<h1>Meine Seite</h1>
<main>
  <section id="welcome">
    <h2>Willkommen</h2>
    <p>Schön, dass Sie da sind. Lorem ipsum dolor sit amet...</p>
  </section>
  <section id="contact">
    <h2>Kontakt</h2>
    <p>So können Sie uns erreichen: Lorem ipsum dolor sit amet...</p>
  </section>
  <section id="team">
    <h2>Wer wir sind</h2>
    <p>Wir sind Lorem ipsum dolor sit amet...</p>
  </section>
  </main>
  <nav>
    <h2>Navigation</h2>
    <ul>
      <li><a href="#welcome">Willkommen</a></li>
      <li><a href="#contact">Kontakt</a></li>
      <li><a href="#team">Wer wir sind</a></li>
    </ul>
  </nav>
</main>

CSS

body {
  padding: 2em;
}

main {
  display: block;
  height: calc(100vh - 11em);
  overflow: auto;
}

nav {
  position: absolute;
  right: 1em;
  top: 1em;
}

section {
  display:none;
}

section:target{
  display:block;
}

JavaScript

if (!location.href.match(/.*#/)) {
  location.href += "#welcome";
}