smart toggle

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
rico971
Messages : 2
Enregistré le : 28 avr. 2022, 03:19

smart toggle

Message par rico971 » 28 avr. 2022, 03:30

Bonjour j'aimerais créer un toggle "reactif".

j'ai trouvé le tuto pour faire la réalisation mais je voudrais ajouter quelques éléments.

je voudrais que une des div soit automatiquement ouverte une fois sur la page et aussi que quand un autre div est ouverte les autres soient fermées automatiquement.

malheureusement je n'arrive pas trouver.

je remercie d'avance pour votre aide.
voici le code html

Code : Tout sélectionner

<button class="accordeon">Objectif</button>
            <div class="panel active">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon"> programme </button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">evaluation</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">Debouchés</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">Aptitude</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">Public</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">Durée</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="accordeon">cout et financement</button>
            <div class="panel">
                <p>Les tableurs et logiciels de traitement de texte vous font faire des cauchemars ? 

                    Nous rater plus aucune opportunité professionnelle en vous formant a la bureautique ! 
                    
                    Ce module de spécialisation vous permettra de jongler avec tous les outils de la bureautique comme un(e) véritable expert(e).</p>
            </div>
            <button class="modal-btn" data-target="#modal1">Fermer</button>
        </div>
voici le code js :

Code : Tout sélectionner

var accordeon = document.getElementsByClassName('accordeon');
var i; 

for(i = 0; i < accordeon.length; i++){
accordeon[i].addEventListener("click",function(){
  this.classList.toggle('active');
  var panel = this.nextElementSibling;
  if(panel.style.display === 'block'){
     panel.style.display='none';
    }else{
       panel.style.display = 'block'
 
    }
  
});
}

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: smart toggle

Message par webmaster » 28 avr. 2022, 11:34

Bonjour,

Voici le code pour réaliser ce besoin avec un peu de commentaire pour comprendre les blocs d'instructions

Code : Tout sélectionner

for(var i = 0; i < accordeons.length; i++){
  /* Initialisation pour cacher les éléments sauf le i==0 */
  if (i==0) {
    accordeons[i].nextElementSibling.style.display="block";
  } else {
    accordeons[i].nextElementSibling.style.display="none";
  }
  
  accordeons[i].addEventListener("click",function(){
    /* Cacher tous les éléments */accordeons
    for(i = 0; i < accordeons.length; i++){
      accordeons[i].nextElementSibling.style.display="none";
    }

    /* Activer l'élément cliqué */
    this.classList.toggle('active');
    this.nextElementSibling.style.display = 'block'
 
  });
}

J'ai renommé accordeons avec un s pour bien montrer que c'est un tableau de plusieurs éléments.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

rico971
Messages : 2
Enregistré le : 28 avr. 2022, 03:19

Re: smart toggle

Message par rico971 » 29 avr. 2022, 00:20

Merci beaucoup !!!!

Répondre