Accordion

Les accordéons permettent de masquer des informations contextuelles à un titre. Ces informations masquées s'affichent lors d'un clic de l'utilisateur sur le titre en question.

Code de base

Chaque accordéon comporte un header et un body. Le style est géré par les classes CSS. Les attributs data- sont recommandés pour gérer l'interaction via Javascript. Il est possible d'utiliser Trilogy Vanilla pour cela.

Aperçu

Mode responsive

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

                                                        <section class="accordions" data-accordion="">
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                            </section>

Contenus dans une Box

Utilisez la facette .is-boxed.

Aperçu

Mode responsive

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

                                                        <section class="accordions is-boxed" data-accordion="">
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>,
                                            tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
                                            gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac
                                            <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor
                                            urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                                            sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                            </section>

Accordéon sans séparateur sur mobile

Aperçu

Mode responsive

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

                                                        <section class="accordions is-unbordered" data-accordion="">
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                                <article class="accordion" data-accordion-context="">
                                    <div class="accordion-header toggle" data-accordion-toggle="">
                                        <p class="text has-text-weight-semibold">Hello World</p>
                                        <button class="toggle" aria-label="toggle"></button>
                                    </div>
                                    <div class="accordion-body">
                                        <div class="accordion-content">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a class="has-text-primary">felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
                                        </div>
                                    </div>
                                </article>
                            </section>