“Cómo crear colapsables usando JavaScript puro” Código de respuesta

Cómo crear colapsables usando JavaScript puro

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

Cómo crear colapsables usando JavaScript puro

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

Cómo crear colapsables usando JavaScript puro

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

Respuestas similares a “Cómo crear colapsables usando JavaScript puro”

Preguntas similares a “Cómo crear colapsables usando JavaScript puro”

Más respuestas relacionadas con “Cómo crear colapsables usando JavaScript puro” en CSS

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código