html Ein- und Ausblenden von Content

Posted 2021-05-11

/* 
Mit der :target Pseudo-Class ist es einfach, Content ein- und auszublenden - und das ganz ohne Javascript. Beispielsweise auf einem Blog: Die Kommentare sollen erst beim Klick auf das Element zu lesen sein. Was noch alles mit der Pseudo-Class möglich ist, kannst du auf bitsofco.de nachlesen. 
*/

#comments:not(:target) {
display: none;
}
#comments:target {
display: block;
}

<a href="#comments">Show Comments</a>
<section id="comments">
  <h3>Comment</h3>
  <a href="#">Hide Comments</a>
</section>