Awesome CSS Collapsible Accordion ( no frameworks ) pure CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome CSS Collapsible Accordion ( no frameworks ) pure CSS
</title>
    <style>
#bam {
  display: none;
}
#bam:target {
  height: 100px;
  display: block;
}

#foo {
  display: none;
}
#foo:after {
  content: url(https://1xpto.netlify.app/pics/car.jpeg);
  position: absolute;
  transform: scale(0.1);
  transform-origin: left top;
}
#foo:target {
  height: 100px;
  display: block;
}

#boom {
  display: none;
}
#boom:target {
  height: 100px;
  display: block;
}
body {
  margin: 0;
}
a {
  text-decoration: none;
}
.link {
  text-align: center;
  width: 100%;
  padding: 20px 0;
  background-color: red;
  display: inline-block;
  color: white;
  border-bottom: 1px solid snow;
  font-size: 30px;
  font-family: arial black;
}
.content {
  font-size: 20px;
  font-family: arial;
  padding: 10px;
  cursor: context-menu;
}

    .subscribe img{
      position: absolute;
      top: 10px;
      left: 10px;
      width: 150px;
    }


</style>
</head>
<body>

  <a class='subscribe' href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw' target='_blank'><img src='https://1xpto.netlify.app/pics/clone.png'/></a>


<a class='link' href='#bam'>Open Section 1</a>
<a href='#'>
  <div class='content' id='bam'>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</div>
</a>

<a class='link' href='#boom'>Open Section 2</a>
<a href='#'>
  <div class='content' id='boom'>
    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
  </div>
</a>

<a class='link' href='#foo'>Open Section 3</a>
<a href='#'>
  <div class='content' id='foo'></div>
</a>


  <script></script>
</body>
</html>