Four ways to use anchors to toggle content

Three ways to interact with links with CSS (no form elements, no summary-details html tags, zero scripting) usable in most websites.

by Junip

HTML

<!-- Inspiration: stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used -->

<p id="btn1"></p>
<p id="btn2"></p>
<p id="btn3"> 
  <a href="#" class="b"></a> 
</p>
<div id="contents">
  <h1 align=center>Lorem</h1>
  <center><img src="scq.tiff" alt="false pic" /></center>
  <hr />
  <p style="text-align:justify; text-indent: 9px;">Lorem ipsum dolos thingies. Now with <a onclick="alert('Hourray.')" href="#idle">clickable</a> stuff.</p>
  <ol>
  <li>Item</li>
  <li>Item</li>
  </ol>
  <ul>
  <li>Item a</li>
  <li>Item b</li>
  </ul>
</div>
<p id="btn4"> 
  <a href="#contents">Click</a>
  <a href="#revert">Click<br>again</a> 
</p>
<hr />

CSS

#btn1::before {
  content: "Hover";
}

#btn1:hover::before {
  content: "Move";
}

#btn1:hover~#contents {
  display: block;
}

#btn2::before {
  content: "Hold down";
}

#btn2:active::before {
  content: "Release";
}

#btn2:active~#contents {
  display: block;
}

#btn2:active {
  opacity: 0;
}

#btn3 a::before {
  content: "Click";
}

#btn3 a:focus::before {
  content: "Click \a away";
  white-space: pre;
}

#btn3:focus-within~#contents {
  display: block;
}

#contents {
  display: none;
  position: absolute;
  top: 15%;
}

[id^="btn"] {
  display: inline-block;
  padding: 0 6px;
  vertical-align: top;
}

[id^="btn"] a {
  text-decoration: none;
  color: black;
}

#btn4 a[href="#revert"] {
  display: none;
}

#contents:target {
  display: block;
}

#contents:target~#btn4 a[href="#contents"] {
  display: none;
}

#contents:target~#btn4 a[href="#revert"] {
  display: block;
}