JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <a href="#" onclick="toggle('hidemeta')">Link A</a>
    <div id="hidemeta" style="display:none">Einzublendender Text A</div>
  </li>
  <li>
    <a href="#" onclick="toggle('hidemetb')">Link B</a>
    <div id="hidemetb" style="display:none">Einzublendender Text B</div>
  </li>
  <li>
    <a href="#" onclick="toggle('hidemetc')">Link C</a>
    <div id="hidemetc" style="display:none">Einzublendender Text C</div>
  </li>
  <!-- usw. -->
</ul>

JavaScript

<h1>überschrift</h1>
<p>bla</p>
<a href="#" onclick="toggle('hidePhase1')">1. Phase</a>
<a href="#" onclick="toggle('hidePhase2')">2. Phase</a> <a href="#" onclick="toggle('hidePhase3')">3. Phase</a> <a href="#" onclick="toggle('hidePhase4')">4. Phase</a> <a href="#" onclick="toggle('hidePhase5')">5. Phase</a> 

<div id="hidePhase1" style="display:none">
      <p><b>Bereich für 1. Phase</b><br>
  Hier kommen nun der Text für Phase 1 dazu.</p></div>

    <div id="hidePhase2" style="display:none">
      <p><b>Bereich für 2. Phase</b><br>
  Hier kommen nun der Text für Phase 2 dazu.</p></div>

    <div id="hidePhase3" style="display:none">
      <p><b>Bereich für 3. Phase</b><br>
  Hier kommen nun der Text für Phase 3 dazu.</p></div>

    <div id="hidePhase4" style="display:none">
      <p><b>Bereich für 4. Phase</b><br>
  Hier kommen nun der Text für Phase 4 dazu.</p></div>

    <div id="hidePhase5" style="display:none">
      <p><b>Bereich für 5. Phase</b><br>
  Hier kommen nun der Text für Phase 5 dazu.</p></div>