JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<header id="your-target">
  <h1>
    Header
  </h1>
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</header>
<main>
  <h2>
    Main
  </h2>
  <p>
   ...with some dummy text to fill the box.
  </p>
 </main>
<footer>
  <h2>
    Footer
  </h2>
  <div class="content">Content here</div>  
  <p>
   ...with some dummy text to fill the box.
  </p>
</footer>

CSS

/* zusätzliche CSS-Regeln - ohne Einfluss auf die Funktionalität */
* {margin:0;padding:0;}
header,main,footer {padding:.75em;}
header,footer {background:#abc;}
main {background:#cde;}

/* bestehendes CSS von stackoverflow */
a {
  color: #000000;
  text-decoration: none;
}
#off {
  display: none;
}
.content {
  display: none;
}
#your-target:target ~ footer .content { /* footer ist ein Geschwisterelement von header */
  display: block;
}
#your-target:target #on {
  display: none;
}
#your-target:target #off {
  display: block;
}