/Html/How to create collapsable using pure Javascript

How to create collapsable using pure Javascript

<div class="collapsable-container">
    <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide First Content" data-onCloseText="Show First Content">Show First Content</a>
    <div id="expand">
        This is some Content
    </div>
 </div>
 
 
 <div class="collapsable-container">
    <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide Second Content" data-onCloseText="Show Second Content">Show Second Content</a>
    <div id="expand">
        This is some Content
    </div>
 </div>

Source: stackoverflow.com

How to create collapsable using pure Javascript

const collapsableBtn = document.querySelectorAll('.collapsable-toggle');

for (let index = 0; index < collapsableBtn.length; index++) {
    collapsableBtn[index].addEventListener('click', function(e) {
        // e.preventDefault();
        e.stopImmediatePropagation();

        iterateElement = this;

        getCollapsableParent = iterateElement.parentElement;

        if(getCollapsableParent.classList.contains('show')) {
            getCollapsableParent.classList.remove('show')
            iterateElement.innerText = iterateElement.getAttribute('data-onCloseText');

        } else {
            getCollapsableParent.classList.add('show');
            iterateElement.innerText = iterateElement.getAttribute('data-onOpenText');
        }
    })
}

Source: stackoverflow.com

How to create collapsable using pure Javascript

.collapsable-container #expand {
   display:none;
}
.collapsable-container.show #expand {
    display:block;
}

Source: stackoverflow.com

Similar codes

28 votes173 views6 answers
Html telephone link
Html
-1 vote165 views2 answers
Html sound autoplay
Html
0 vote165 views1 answer
React uncontrolled input initial value
Html
25 votes180 views3 answers
Html to text
Html
6 votes167 views2 answers
Raise WebDriverException( selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH. Please see https://sites.google.com/a/chromium.org/chromedriver/home
Html
65 votes171 views6 answers
How to add links in html
Html
0 vote170 views1 answer
Aria-haspopup
Html
2 votes179 views1 answer
Htmladjacent
Html
4 votes176 views3 answers
Hyperlinks in html
Html
0 vote152 views3 answers
Tailwind css card
Html