Why isn't my collapsible box code working?

I have this piece of code working on another section of my website to have a collapsible box with text inside but for some reason nothing happens when I click this one

Code

<html>
  <style>
    .collapsible {
    background-color: #e0d6a6;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #ccc;
  }
    
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }
  .h1 {
  font-size: 40px
      font-family: monospace;
    color: #765694;
}
.center {
  text-align: center;
}
  </style>
<head>
    <title>SilkSkull's Music Lair</title>
</head>
<link rel="stylesheet" href="pages.css">

<body>
<div id="content-div">
<!--Place your content bellow this line!-->

<h2>SilkSkulls Musical Lair</h2>

<p class="center">
  <button type="button" class="collapsible">My Current Obsession</button>
  <div class="content">
    <p>My biggest musical obesession at the moment is Thrash metal! I've been listening mostly to the
      big 4 but I really like some less mainstream bands too! (S.O.D rules!!!)
    </p>
  </div>
</P>


<!--Place your content above this line!-->
</div>

</body>
<script>
  var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>
</html>