JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.smoobook.de/javascript/scriptaculous/lib/prototype.js"></script>
<script src="http://www.smoobook.de/javascript/scriptaculous/src/scriptaculous.js?load=effects"></script>
<script src="http://www.smoobook.de/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="http://www.smoobook.de/smoobook/css/lightwindow.css">
<ul>
  <li>
    <a href="#" onclick="swap('cat')">Link A</a>
    <div id="cat" style="display:none">Einzublendender Text A</div>
  </li>
  <li>
    <a href="#" onclick="swap('cat1')">Link B</a>
    <div id="cat1" style="display:none">Einzublendender Text B</div>
  </li>
  <li>
    <a href="#" onclick="swap('cat2')">Link C</a>
    <div id="cat2" style="display:none">Einzublendender Text C</div>
  </li>
  <!-- usw. -->
</ul>

JavaScript

var text = new Array();
text[0] = 'cat';
text[1] = 'cat1';
text[2] = 'cat2';
 
function swap(id) {
  if(document.getElementById(id).style.display=="none") {
    for(i=0;i<text.length;i++) {
    document.getElementById(text[i]).style.display="none";
    }
    document.getElementById(id).style.display="block";
    }
    else {
    document.getElementById(id).style.display="none";
  }
}