JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<input type="radio" value="Abschicken" id="radio-red" name="radio">
  <label value="red" for="radio-red" id="red">Rot</label>
<input type="radio" value="Abschicken" id="radio-blue" name="radio">
  <label value="blue" for="radio-blue" id="blue">Blau</label>
<div id="box-red" class="red hide">
</div>
<div id="box-blue" class="blue hide">
</div>

CSS

.hide {
  display: none;
}

.show {
  display: block;
}

#box-red, #box-blue {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

JavaScript

document.getElementById('radio-red').onclick=function(){
  document.getElementById('box-red').classList.add("show");
  document.getElementById('box-red').classList.remove("hide");
	document.getElementById('box-blue').classList.add("hide");
  document.getElementById('box-blue').classList.remove("show");
} 

document.getElementById('radio-blue').onclick=function(){
  document.getElementById('box-blue').classList.add("show");
  document.getElementById('box-blue').classList.remove("hide");
  document.getElementById('box-red').classList.add("hide");
  document.getElementById('box-red').classList.remove("show");
}