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>