how to create collapsable using pure javascript

1<div class="collapsable-container">
2    <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide First Content" data-onCloseText="Show First Content">Show First Content</a>
3    <div id="expand">
4        This is some Content
5    </div>
6 </div>
7 
8 
9 <div class="collapsable-container">
10    <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide Second Content" data-onCloseText="Show Second Content">Show Second Content</a>
11    <div id="expand">
12        This is some Content
13    </div>
14 </div>

1const collapsableBtn = document.querySelectorAll('.collapsable-toggle');
2
3for (let index = 0; index < collapsableBtn.length; index++) {
4    collapsableBtn[index].addEventListener('click', function(e) {
5        // e.preventDefault();
6        e.stopImmediatePropagation();
7
8        iterateElement = this;
9
10        getCollapsableParent = iterateElement.parentElement;
11
12        if(getCollapsableParent.classList.contains('show')) {
13            getCollapsableParent.classList.remove('show')
14            iterateElement.innerText = iterateElement.getAttribute('data-onCloseText');
15
16        } else {
17            getCollapsableParent.classList.add('show');
18            iterateElement.innerText = iterateElement.getAttribute('data-onOpenText');
19        }
20    })
21}

1.collapsable-container #expand {
2   display:none;
3}
4.collapsable-container.show #expand {
5    display:block;
6}