IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Créer des accordeons toggle en HTML


Sujet :

HTML

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut 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

  2. #2
    Invité de passage
    Homme Profil pro
    Inscrit en
    Mars 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2013
    Messages : 12
    Par défaut
    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/

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut Merci
    C'est superbe,

    C'est exactement ça

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

    MERCI

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut ffet Accordion Toggle ne fonctionne pas sous wordpress (n'ouvre pas le texte lié)
    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>

  5. #5
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 696
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 696
    Par défaut
    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.

  6. #6
    Invité de passage
    Homme Profil pro
    Inscrit en
    Mars 2013
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2013
    Messages : 12
    Par défaut
    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.

  7. #7
    Membre chevronné
    Homme Profil pro
    web a11y
    Inscrit en
    Avril 2014
    Messages
    192
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : web a11y
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2014
    Messages : 192
    Par défaut Formater du code
    Hello !

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

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut Vous avez raison c'est avec la balise <details> qui permet l'animation des boites
    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>

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut Voilà ce que cela donne adresse du site ce sera plus clair pour tout le mopnde
    https://arepege.org/conferences-annee-2023

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

    Merci

    Bien cordialement

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 40
    Par défaut Volià le texte définitif
    <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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 23/12/2006, 23h39
  2. Réponses: 6
    Dernier message: 22/09/2006, 10h01
  3. [CSS] copie des styles par défaut html...possible?
    Par luta dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 27/10/2005, 08h50
  4. [MySQL] Formulaire php + bdd = perte des sauts de ligne html ?
    Par sunshine33 dans le forum PHP & Base de données
    Réponses: 8
    Dernier message: 03/10/2005, 11h19
  5. [OPENOFFICE] Transformation des tableaux OOo en HTML
    Par GrandFather dans le forum Format d'échange (XML, JSON...)
    Réponses: 3
    Dernier message: 15/05/2004, 18h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo