Accordion CSS

Construire un accordion HTML sans JavaScript

Source : https://jeremielitzler.fr/post/2024-03/construire-un-accordeon-html-sans-javascript/

Le code HTML

Dans un élément HTML coller le code des boites de texte à développer.

                                    <details>
                                    <summary class="widget-title section-title" aria-label="Cliquer pour développer le texte" title="Cliquer pour développer le texte">
                                    <span class="widget-title"> Texte 1 </span>
                                    </summary>
                                    <div class="tagCloud-tags">
                                    <p>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.</p>
                                    <br>
                                    </div>
                                    </details>
                                    
                                    <details>
                                    <summary class="widget-title section-title" aria-label="Cliquer pour développer le texte" title="Cliquer pour développer le texte">
                                    <span class="widget-title"> Texte 2 </span>
                                    </summary>
                                    <div class="tagCloud-tags">
                                    <p>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.</p>
                                    <br>
                                    </div>
                                    </details>

Le code CSS

Code à placer dans le css de l'élément HTML

                                    .$ details > summary {
                                    cursor: pointer;
                                    display: flex;
                                    align-items: center;
                                    font-size: large;
                                    flex-direction: row;
                                    padding: 0.5em 0.5em;
                                    background: #821616;
                                    color: #fff;
                                    margin-top: 10px;
                                    }
                                    .$ details summary::after {
                                    content: "▼";
                                    font-size: large;
                                    margin-right: 1em;
                                    margin-left: auto;
                                    color: #fff;
                                    }
                                    .$ details[open] summary::after {
                                    content: "▲";
                                    font-size: large;
                                    margin-left: auto;
                                    }
                                    .$ .tagCloud-tags {
                                    background: #b5a490;
                                    font-size: large;
                                    color: #000;
                                    padding: 0.5em 0.5em;
                                    }
                                    .$ a {
                                    color: #000
                                    font-weight:bold;
                                    text-decoration:none;
                                    }
                                    .$ a:link {
                                    color: #000;
                                    font-weight:normal;
                                    }
                                    .$ a:visited {
                                    color: grey;
                                    font-weight:normal;
                                    }

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon