Javascript Improve collapsing element

I have created this toggle script which works well but I need to improve it so that onclick, any previously collapsed (i.e. open) subcats would simultaneously close and only the one clicked should collapse (i.e. open).

var collapse = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < collapse.length; i++) {
  collapse[i].addEventListener("click", function() {
    this.classList.toggle("activeCollapse");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '02B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>

Answer

First, loop through the open elements and remove the class and set max height to null. Then do your normal code.

I also changed your event Listener so you only have one instead of one for each element.

var collapse = document.querySelector(".catColumn");

collapse.addEventListener("click", function(e) {
  let el = e.target;
  let hideSelf = (el.className.indexOf("activeCollapse") > 0);

  if (el.className.indexOf("collapsible") > -1) {
    let shown = document.querySelectorAll(".activeCollapse");
    shown.forEach(function(activeEl) {
      activeEl.classList.remove("activeCollapse");
      activeEl.nextElementSibling.style.maxHeight = null;
    });

    if (hideSelf == false) {
      el.classList.toggle("activeCollapse");
      var content = el.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }


  }
});

.catColumn {
  width: 400px;
  margin: 0 auto;
}

.collapsible {
  width: 100%;
  padding: 14px 8px;
  margin-top: 10px;
  color: #5a2e0f;
  background-color: #fff;
  border: 1px solid #c1bfbf;
  outline: none;
  border-radius: 6px;
}

.collapsible:hover {
  background-color: #efdac6;
}

.collapsible:after {
  float: right;
  content: '02B';
  color: #5a2e0f;
  font-size: 1.8em;
  margin-left: 5px;
  cursor: pointer;
  line-height: 26px;
}

.activeCollapse {
  background-color: #efdac6;
  border-radius: 0;
  border-bottom: 0px;
}

.activeCollapse:after {
  content: "2212";
}


/**/

ul.subcats {
  width: 100%;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  font-size: 13px;
}

ul.subcats li {
  padding: 12px;
}

<div class="catColumn">
  <div class="collapsible">cat1</div>
  <ul class="subcats">
    <li>subcat1</li>
    <li>subcat2</li>
  </ul>
  <div class="collapsible">cat2</div>
  <ul class="subcats">
    <li>subcat3</li>
    <li>subcat4</li>
  </ul>
</div>