Expand/hide collapsible using javascript

Question

I want to implement expandable menu. Only one heading should be expanded. When user clicks on another one, content of the previously expanded heading should hide. I have used code from w3schools, but I don't know how to automatically hide previous heading.

      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";
          }
        });
      }

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
          <div class="content">
            <p>text</p>
           </div>

      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text.</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text</p>
      </div>

Answer 1

Simply collapse opened collapsible on click by JS:

var coll = document.getElementsByClassName("collapsible");
      var i;

      for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
          var content = this.nextElementSibling;
          if (this.classList.contains("active")) {
            content.style.opacity = 0;
          } else {
            if(node=document.querySelector(".collapsible.active")){
              node.classList.toggle("active",false);
              node.nextElementSibling.style.opacity = 0;
            }
            content.style.opacity = 1;
          }
          this.classList.toggle("active");
        });
      }

.content{
opacity:0;
transition:opacity 0.5s;
}

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
          <div class="content">
            <p>text</p>
           </div>

      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text1</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text2</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text3</p>
      </div>

Or, to use with height, you'll need to add overflow-y:hidden to hide it completely:

var coll = document.getElementsByClassName("collapsible");
      for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
        console.trace()
        debugger
          var content = this.nextElementSibling;
          if (this.classList.contains("active")) {
            content.style.height = 0;
          } else {
            if(node=document.querySelector(".collapsible.active")){
              node.classList.toggle("active",false);
              node.nextElementSibling.style.height = 0;
            }
            content.style.height = content.scrollHeight+"px";
          }
          this.classList.toggle("active");
        });
      }

.content{
height:0;
transition:height 0.5s;
overflow-y:hidden;
}

<h2>Collapsibles</h2>

          <p>A Collapsible:</p>
          <button class="collapsible">Open Collapsible</button>
      <div class="content">
        <p>text1</p>
      </div>
      <p>Collapsible Set:</p>
      <button class="collapsible">Open Section 1</button>
      <div class="content">
        <p>text1</p>
      </div>
      <button class="collapsible">Open Section 2</button>
      <div class="content">
        <p>text2</p>
      </div>
      <button class="collapsible">Open Section 3</button>
      <div class="content">
        <p>text3</p>
      </div>

Answer 2

A more readable way to do this is to divide your code in functions, like this:

<script>
    function hideOthers(actual) {
      var contentDivs = document.querySelectorAll('.content');
      contentDivs.forEach(others => {
        if (others !== actual) {
          others.style.display = 'none';
        }
      });
    }

    function toggleDisplay(div) {
      if (div.style.display === "block") {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    }

    function onContentLoaded() {
      var collapsibleDivs = document.querySelectorAll(".collapsible");

      collapsibleDivs.forEach(div => {
        div.addEventListener('click', e => {
          var clicked = e.srcElement;
          var sibling = clicked.nextElementSibling;

          toggleDisplay(sibling);
          hideOthers(sibling);
        })
      })
    }

    document.addEventListener("DOMContentLoaded", onContentLoaded);
  </script>

Notice I've just changed your JS script and I've used document.querySelectorAll to get all elements with a given class, forEach function to iterate over elements, arrow functions to provide callbacks and e.srcElement to get the clicked element on the click handler. Hope it help you. Welcome to SO!