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>
   foobar
  </p>
 </main>
<footer>
  <h2>
    Footer
  </h2>
  <div class="content">Content here</div>  
</footer>

CSS

/* some additional CSS-rules */
* {margin:0;padding:0;}
header,footer {background:#abc;}
main {background:#cde;}

/* existing CSS */
a {
  color: #000000;
  text-decoration: none;
}
#off {
  display: none;
}
.content {
  display: none;
}
#your-target:target ~ footer .content { /* footer is a sibling of header */
  display: block;
}
#your-target:target #on {
  display: none;
}
#your-target:target #off {
  display: block;
}