“Como criar colapsável usando javascript puro” Respostas de código

Como criar colapsável 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

Como criar colapsável usando javascript puro

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

Concerned Cormorant

Como criar colapsável 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

Respostas semelhantes a “Como criar colapsável usando javascript puro”

Perguntas semelhantes a “Como criar colapsável usando javascript puro”

“Como criar colapsável usando javascript puro” Respostas de código

Como criar colapsável usando javascript puro

Como criar colapsável usando javascript puro

Como criar colapsável usando javascript puro

Respostas semelhantes a “Como criar colapsável usando javascript puro”

Perguntas semelhantes a “Como criar colapsável usando javascript puro”

Mais respostas relacionadas para “Como criar colapsável usando javascript puro” em CSS

Procure respostas de código populares por idioma

Shell/Bash

C#

C++

C

CSS

HTML

Java

JavaScript

Objective-C

PHP

Python

Sql

Swift

Ruby

TypeScript

Go

Kotlin

Assembly

R

VBA

Scala

Rust

Dart

Elixir

Clojure

Haskell

Matlab

Erlang

Cobol

Fortran

Scheme

Perl

Groovy

Lua

Julia

Delphi

Abap

Lisp

Prolog

Pascal

ActionScript

Basic

Solidity

PowerShell

GDScript

Excel

Procurar outros idiomas de código