Breaking News: Grepper is joining You.com. Read the official announcement!

How to create collapsable using pure Javascript

Concerned Cormorant answered on June 25, 2021 Popularity 3/10 Helpfulness 1/10

answer How to create collapsable using pure Javascript

related How to create collapsable using pure Javascript

How to create collapsable using pure Javascript

Comment

<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>

Popularity 3/10 Helpfulness 1/10 Language html

Source: stackoverflow.com

Tags: collapsable html javascript using

Link to this answer
Share Copy Link

Contributed on Jun 25 2021

Concerned Cormorant

0 Answers Avg Quality 2/10

Closely Related Answers

How to create collapsable using pure Javascript

Comment

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');
        }
    })
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: collapsable javascript using

Link to this answer
Share Copy Link

Contributed on Jun 25 2021

Concerned Cormorant

0 Answers Avg Quality 2/10

How to create collapsable using pure Javascript

Comment

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

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: javascript using collapsable css

Link to this answer
Share Copy Link

Contributed on Jun 25 2021

Concerned Cormorant

0 Answers Avg Quality 2/10

How to create collapsable using pure Javascript

Contents

More Related Answers

How to create collapsable using pure Javascript

Closely Related Answers

How to create collapsable using pure Javascript

How to create collapsable using pure Javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.