JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<button onclick="show('text1'); return false">Button1</button>
		<button onclick="show('text2'); return false">Button2</button>
		<button onclick="show('text3'); return false">Button3</button>
		<button onclick="show('text4'); return false">Button4</button>

		
<div id="text1">Hier ist Text 1</div>
		<div id="text2">Hier ist Text 2</div>
		<div id="text3">Hier ist Text 3</div>
		<div id="text4">Hier ist Text 4</div>

CSS

div {
  display: none;
}

div.open {
  display: block;
}

JavaScript

function show(id) {
  const openDiv = document.querySelector('div.open');
  if (openDiv) openDiv.classList.remove('open');
  const mydiv = document.getElementById(id);
  mydiv.classList.add('open');
}