Только один разборный открытый одновременно

Question

Обратите внимание: я начал изучать Javascript неделю назад, извините за плохое знание.

Я изучаю следующий урок:

https://www.w3schools.com/howto/howto_js_collapsible.asp

Я не трогалJS, но я реализовал это в строке 4, которая на мобильных устройствах укладывается в 2 строки по 2.

Как вы можете видеть поНа приведенном выше снимке экрана, если я открою один из складных компонентов, все они откроются, создав пространство под всеми 4 элементами.

Можно ли ограничить это только одним открытием одновременно?

Я попытался продублировать скрипт & css для первой и второй строки, присвоив им имена collapsible2 и т. Д., И это не сработало.

Я посмотрел здесь, и в этом уроке нет ничего конкретного итолько с одним открытием.

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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

Я бы хотел, чтобы только один разборный открывался за один раз или ограничивался одной строкой.

Если бы кто-то мог помочь с JS, это было бы очень полезно!Заранее спасибо.