JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="javascript/navbar fixed.js"></script>

  <!-- begin snippet: js hide: false -->

  <body>
    <nav id="navwrapper">
      <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection">
      <h1 id="titel">Headline</h1>
        <ul id="widenav">
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="activenav navb">content1</button></li>
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="2" class="navb">content2</button></li>
        </ul>
      </div>
      
      	
		<button id="burger" class="open-main-nav">
			<span class="burger"></span>
			<span class="burger-text">Menu</span>
		</button>
    <div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
		<div class="main-nav" id="main-nav">
			<ul>
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="activenav mobilenavb">content1</button></li>
          <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="2" class="mobilenavb">content2</button></li>
        </ul>
		</div>
    </div>
    </nav>

<div id="wrap" class="contentSection wrapper">
    <!-- SECTION 1 -->
      <section id="content1" class="contentsec" data-number="1">
        <div>
          <h1>head1</h1>
          <h2>content1</h2>
        </div>
      </section>

<!-- SECTION 2 -->
      <section id="content2" class="contentsec" data-number="2">
        <div>
          <h1>head2</h1>
          <h2>content2</h2>
        </div>
      </section>
      </div>
      </body>
      </html>

CSS

/* ALLGEMEINES */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

body {
  height: 5000px;
}

#wrap {
  scroll-margin-top: 130px;
}

h1 {
  text-align: center;
  font-size: 5rem;
  top: 0.5em;
  position: relative;
}

h2 {
  text-align: center;
  font-weight: 300;
  margin-top: 3em;
  font-size: 1rem;
}

ul {
  list-style: none;
  text-align: center;
}

ul li {
  display: inline-table;
  margin-left: 0.25vw;
  padding: 0.25vw;
}

button {
  cursor: pointer;
}

/* NAVIGATION */
.navb {
  position: relative;
  top: 50px;
  color: black !important;
}

.navb:hover {
  color: #fff !important;
}

#navbar {
  text-align: center;
  width: 100%;
  color: white;
  z-index: 999;
  transition: 0.3s;
}

#navwrapper {
  background: darkgray;
  height: 200px;
}


/* Switching content on button press */
.selectSection {
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  text-align: center;
}

.selectSection button {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  background-color: rgba(0, 0, 0, 0) !important;
  display: inline-block;
  padding: 15px 20px;
  position: relative;
  border: none;
  border-bottom: 1px;
  outline: none;
}

.activenav {
  color: black !important;
}

/* hides every element except the first */
.contentsec:not(:first-child) {
  display: none;
}

.contentSection {
  margin: 0px;
  display: block;
  display: grid;
}
/* END */



/* CONTENT */

.uberschrift {
    margin-bottom: 1em;
}



/* BURGER MENU */
/* Main menu positionning */
.mobilecontainer {
  visibility: hidden;
}

.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    background: rgba (0,0,0,0);
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: all .375s;
}

.main-nav.is-open {
    opacity: 1;
    z-index: 1100;
    visibility: visible;
}

/* White band effect */
.main-nav::before {
	 content: '';
 ...

JavaScript

// change activenav class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp


// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");

// loop through the buttons using for..of 
for (let button of Buttons) {
  // listen for a click event 
  button.addEventListener('click', (e) => {
    // et = event target
    const et = e.target;
    // slect activenav class
    const activenav = document.querySelector(".activenav");
    // check for the button that has activenav class and remove it
    if (activenav) {
      activenav.classList.remove("activenav");
    }
    // add activenav class to the clicked element 
    et.classList.add("activenav");

    // select all classes with the name content
    let allContent = document.querySelectorAll('.contentsec');

    // loop through all content classes
    for (let contentsec of allContent) {
      // display the content if the class has the same data-attribute as the button 
      if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
        contentsec.style.display = "block";
      }
      // if it's not equal then hide it.
      else {
        contentsec.style.display = "none";
      }
    }
  });
}





let burger = document.getElementById('burger'),
	 nav    = document.getElementById('main-nav');

burger.addEventListener('click', function(e){
	this.classList.toggle('is-open');
	nav.classList.toggle('is-open');
});



if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
    contentsec.style.display = "block";
  }
  // if it's not equal then hide it.
  else {
    contentsec.style.display = "none";
  }