title: HTML/CSS collapsible button for "Read More" not working
body: <p>I'm trying to create a "Read More" button so that I could collapse a large piece of text. So far, what I have is the following. However, when I click the "read more" button, it doesn't reveal the rest of the text. </p>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>{% extends "layout.html" %}
  
  {% block body %}
  
          &lt;div class="jumbotron text-center"&gt;
              &lt;br&gt;
              &lt;center&gt;&lt;h1&gt;About Us&lt;/h1&gt;&lt;/center&gt;
              &lt;section class="main items"&gt;
              &lt;article class="item"&gt;
                  &lt;header&gt;
                      &lt;a href="#"&gt;&lt;img src="images/pic01.jpg" alt="" /&gt;&lt;/a&gt;
                      &lt;h3&gt;John Doe&lt;/h3&gt;
                  &lt;/header&gt;
                  &lt;center&gt;&lt;img src="static/pic.jpg" style="width:400px;"&gt;&lt;/img&gt;&lt;/center&gt;
                  &lt;br&gt;&lt;br&gt;&lt;p&gt;This is where the text I want to show goes.&lt;/p&gt;                          
                  &lt;button class="collapsible"&gt;Read More&lt;/button&gt;
                  &lt;div class="more_content"&gt;
                      &lt;p&gt;This is the text I want to appear after clicking the read more button.&lt;/p&gt;
                  &lt;/div&gt;  
              &lt;/article&gt;
          &lt;/div&gt;
  
      &lt;!-- Scripts --&gt;
  
      &lt;script src="js/collapsible.js"&gt;&lt;/script&gt;
  
  {% endblock %}
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>/* Style the button that is used to open and close the collapsible content */
  .collapsible {
    background-color: #ffbf00;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  
  /* Style the collapsible content. Note: hidden by default */
  .more_content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #ffbf00;
  }
  </code></pre>
  
  <p>Here is the added JS as per the suggestions in the comments. However, it still doesn't work when I click the "read me" button. </p>
  
  <p><strong>JS (collapsible.js)</strong>:</p>
  
  <pre><code>var coll = document.getElementsByClassName("collapsible");
  var i;
  
  for (i = 0; i &lt; coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var more_content = this.nextElementSibling;
      if (more_content.style.display === "block") {
        more_content.style.display = "none";
      } else {
        more_content.style.display = "block";
      }
    });
  }
  </code></pre>