Discussion :

[dede tabby]

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

[casperweb]

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/

[dede tabby]

C'est superbe,

C'est exactement �a

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

MERCI

[dede tabby]

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>

[mathieu]

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.

[casperweb]

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.

[Stellar7]

Hello !

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

[dede tabby]

Apr�s avoir suivi plusieurs tutoriels voil� ce que j'ai r�ussi � �crire.
Cela fonctionne sauf le markker qui reste et de la redondance dans ce CSS.
Je n'ai aucune comp�tence professionnelle en informatique je m'en excuse mais tr�s passionn�.

Merci de vos temps pass� pour moi et vos r�ponses.

<h1>conf�rences ann�e 2024</h1>
<main>
<div class="accordion">
<details name="paysages">
<summary> jeudi 11 Janvier Id�es re�ues et concepts actuels.</summary>
<div class="details-content">
<p>Dr Fran�ois CORRARD P�diatre
Pr�sident d'ACTIV (Association Clinique et Th�rapeutique Infantile du Val de Marne)</p>
</div>
</details>
<div class="accordion">
<details name="paysages">
<summary> jeudi 9 f�vrier Les prescriptions m�dicamenteuses chez les enfants en France</summary>
<div class="details-content">
<p>Dr Marion Taine Chercheuse Inserm Centre de Recherche en �pid�miologie et Statistiques - Universit� de Paris (CRESS) GIS Epi-Phare</p>
</div>
</details>

<div class="accordion">
<details name="paysages">
<summary> jeudi 16 mars vaccination HPV</summary>
<div class="details-content">
<p>Dr H�l�ne Borne Gyn�cologue colposcopiste � Paris 8 -�me</p>
</div>
</details>
</div>
</div>
</div></div>
</div></div></div></div></main>

<style>
{
margin:0;
padding:0;
}
body{
font-family: "Inter";
}
.accordion-content p{
/* background-color: red; */
max-height:20px;
padding:20px;
}
.accordion-item.active .accordion-content{
max-height:400px;
background-color: yellow;
}

details < summary {
/* border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0; */
background-color: red; /* #EEE; */
padding:20px;
cursor: pointer;
font-weight:600;
}

summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
background-color: #EEE;
cursor: pointer;
}

details[open] {
padding: 0.5em;
}

details[open] summary {
/* border-bottom: 1px solid #aaa; */
margin-bottom: 0.5em;
}

{
margin:0;
padding:0;
}
body{
font-family: "Inter";
}

.faq{ .accordion{
padding:30px;
box-sizing:border-box;
}
details > summary {
padding: 4px;
width: 200px;
background-color: #eee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}

::marker{
content""
}
<!-- .accordion-item{
margin-bottom:10px;
} -->
.details.summary{
background-color: white;
}

.accordion.details.summary{
cursor: pointer;
background-color: white;
}
.accordion-header{
background-color: #EEE;
padding:20px;
cursor: pointer;
font-weight:600;
}
.accordion-content{
max-height:0;
background-color: white;
overflow:hidden; /* hidden;*/
transition: max-height 0.6s ease;
}
.accordion-content p{
max-height:0;
padding:20px;
}
.accordion-item.active .accordion-content{
max-height:400px;
}
</style>

[dede tabby]

https://arepege.org/conferences-annee-2023

Mon objectif est de moderniser notre site et de le rendre plus accessible au smartphone.

Merci

Bien cordialement

[dede tabby]

<h1>Conf�rences ann�e 2025</h1>
<main>
<div class="accordion">
<details name="paysages">
<summary> jeudi 9 Janvier Fi�vre : id�es re�ues et concepts actuels</summary>
<div class="details-content">
<p>Dr Fran�ois CORRARD P�diatre
Pr�sident d'ACTIV (Association Clinique et Th�rapeutique Infantile du Val de Marne)</p>
</div>
</details>
<div class="accordion">
<details name="paysages">
<summary> jeudi 13 f�vrier Neurosciences affectives et sociales et d�veloppement de l�enfant.</summary>
<div class="details-content">
<p>Dr Catherine Gueguen P�diatre, a exerc�e plus de 20 ans � l�Institut hospitalier Franco-britannique (Levallois-Perret).</p>
<p>Sp�cialis�e dans le soutien � la parentalit�. Auteure de plusieurs livres.</p>

</div>
</details>

<div class="accordion">
<details name="paysages">
<summary> jeudi 6 mars Lecture critique d�une NFS autour de cas cliniques.</summary>
<div class="details-content">
<p>Dr Corinne GUITTON P�diatre � H�matologue Praticien hospitalier - service de p�diatrie g�n�rale, H�pital Bic�tre, Le Kremlin Bic�tre</p>
</div>
</details>
<div class="accordion">
<details name="paysages">
<summary> jeudi 15 mai Troubles des conduites alimentaires chez l�adolescent : rep�rage, diagnostic et premiers soins.</summary>
<div class="details-content">
<p>Dr Renaud de Tournemire Responsable de l�unit� de m�decine de l�adolescent h�pital Ambroise par� � Boulogne</p>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

<style>
{
margin:0;
padding:0;
}
body{
font-family: "Inter";
}
details{
::marker{
content: ""
}
details < summary { /* IMPORTANT */
/* border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0; */
padding:20px;
font-weight:600;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
background-color: #EEE;
cursor: pointer;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
/* border-bottom: 1px solid #aaa; */
margin-bottom: 0.5em;
background-color:#9DFEFF; /* tr�s bien */
}
</style>