Expandable Listitem autohide about onsenui HOT 3 CLOSED

<ons-page id="expanding">
<ons-list>
 <ons-list-item expandable id="list1">
          <label id="label1">Tap to expand 1</label>
          <div class="expandable-content" id="content1">Expandable content 1</div>
        </ons-list-item>
        <ons-list-item expandable id="list2">
          <label id="label2">Tap to expand 2</label>
          <div class="expandable-content" id="content2">Expandable content 2</div>
        </ons-list-item>
        <ons-list-item expandable id="list3">
          <label id="label3">Tap to expand 3</label>
          <div class="expandable-content" id="content3">Expandable content 3</div>
        </ons-list-item>
</ons-list>
</ons-page>

// label - to trigger click event
const label1 = document.getElementById('label1');
const label2 = document.getElementById('label2');
const label3 = document.getElementById('label3');

// list - to listen for click event
const list1 = document.getElementById('list1');
const list2 = document.getElementById('list2');
const list3 = document.getElementById('list3');

const isVisible = (element) => {
  return (window.getComputedStyle(element).display !== 'none' && window.getComputedStyle(element).visibility !== 'hidden');
};


const collapseOther = (id) => {
  [1, 2, 3].forEach(item => {
    if (id !== item) {
      const content = document.getElementById('content' + item);
      if (isVisible(content)) {
        const label = document.getElementById('label' + item);
        label.click();
      }
    }
  });

};

const handleListClicked = (event) => {
  const labelElement = event.target.children[0] || event.target;
  if (labelElement == label1) {
    collapseOther(1);
  } else if (labelElement == label2) {
    collapseOther(2);
  } else if (labelElement == label3) {
    collapseOther(3); 
  }
};

[list1, list2, list3].forEach((li) => li.addEventListener('click', handleListClicked));