“Comment créer une collapable à l'aide de JavaScript pur” Réponses codées

Comment créer une collapable à l'aide de JavaScript pur

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

Comment créer une collapable à l'aide de JavaScript pur

<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

Comment créer une collapable à l'aide de JavaScript pur

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

Concerned Cormorant

Réponses similaires à “Comment créer une collapable à l'aide de JavaScript pur”

Questions similaires à “Comment créer une collapable à l'aide de JavaScript pur”

“Comment créer une collapable à l'aide de JavaScript pur” Réponses codées

Comment créer une collapable à l'aide de JavaScript pur

Comment créer une collapable à l'aide de JavaScript pur

Comment créer une collapable à l'aide de JavaScript pur

Réponses similaires à “Comment créer une collapable à l'aide de JavaScript pur”

Questions similaires à “Comment créer une collapable à l'aide de JavaScript pur”

Plus de réponses similaires à “Comment créer une collapable à l'aide de JavaScript pur” dans JavaScript

Parcourir les réponses de code populaires par langue

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

Parcourir d'autres langages de code