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