Créer des accordeons toggle en HTML

Je cherche à refaire les accordéons de Google pour des pages de Wordpress mais je ne trouve pas d'exemple.

merci de m'aider ou de mes donner le bon forum.

C'est pour moderniser un site associatif que je gère.

Bien cordialement

Merci

Bonjour, c'est sans doute la balise <details> que vous cherchez.
https://developer.mozilla.org/fr/doc...ements/details

Si vous utilisez Gutenberg il y a un bloc details :
https://fr.wordpress.org/support/article/details-block/

C'est superbe,

C'est exactement ça

Par contre bien que j'ai Gutenberg, pas moyen de trouver ajouter un bloc.

MERCI

Création d'accordéons (toggle) en HTML, CSS et Javascript selon un tutoriel Youtube. L'animation ne marche pas, l'accordéon ne s'ouvre pas pour afficher le texte. Je vous remercie de votre aide professionnelle ou éclairée. c'est pour du WORDPRESS. pour moi il manque quelque chose autour du toggle("active")
Bien cordialement

<script>
const accordionItems = document.querySelectorAll(".accordion-item");
accordionItems.forEach(item => {
const header = item.querySelector(".accordion-header");
header.addEventListener("cLick", () => {
item.classList.toggle("active");
})
})
</script>

<style type="texte/css">
.faq{
padding:30px;
box-sizing:border-box;
}
.accordion-item{
margin-bottom:10px;
}
.accordion-header{
background-color: #EEE;
padding:20px;
cursor:pointer;
font-weight:600;
}
.accordion-content{
max-height:0;
overflow:hidden;
transition: max-height 0.6s ease;
}
.accordion-content p{
max-height:0;
padding:20px;
}
.accordion-item.active .accordion-content{
max-height:200px;
}
</style>

<div class="faq">
<div class="accordion-item">
<div class="accordion-header">Date 1</div>
<div class="accordion-content">
<p>Contenu de la conférence 1...</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Date 2</div>
<div class="accordion-content">
<p>Contenu de la conférence 2...</p>
</div>
</div>
<div class="accordion-item"></div>
<div class="accordion-header">Date 3</div>
<div class="accordion-content">
<p>Contenu de la conférence 3...</p>
</div>
</div>
</div>

vous avez un 1er souci avec <style type="texte/css">, le type indiqué est invalide.
cet attribut est maintenant optionnel donc vous pouvez juste mettre <style>.

cela va déjà faire avancer votre code mais il y encore un 2e problème avec votre code html.
je vous conseille de bien indenter tout votre code et vous verrez peut-être mieux où est le souci.

Bonjour, sur ce forum vous avez la possibilité d'introduire du code via le bouton # de la barre d'outil du forum ce qui affiche une coloration syntaxique en plus des numéros de ligne.
En complément de la réponse de mathieu, vous pouvez utiliser le validateur HTML pour voir les erreurs de syntaxe => https://validator.w3.org/

Une erreur également en JS, l'évènement c'est click (tout en minuscule) pas cLick.

Hello !

Un autre outil intéressant pour formater du code (et pas que HTML) : Free Formatter Online.