Accordions . Documentation
.accordion
Cherry
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.
Banana
Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.
Gooseberry
Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.
Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.
(data-singletab='true')
Apricot
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.
Pear
Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.
Peach
Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.
Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.
details(open='open')
Redcurrant
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.
Watermelon
Tangerine
Nulla fermentum tempus massa vel facilisis. Cras nec nisi mattis, vestibulum orci quis, mattis sem. Sed posuere orci at metus eleifend, sed mollis magna convallis. Aenean blandit est nec sodales vulputate. Nullam massa ex, luctus sed orci convallis, rhoncus venenatis felis. Sed eget nunc eget velit facilisis lacinia. Nunc arcu elit, facilisis eget nisi sed, maximus consequat odio. Suspendisse sit amet dictum ex. Nunc eu suscipit felis.
Pineapple
Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.
Raspberry
Tangerine
Nulla fermentum tempus massa vel facilisis. Cras nec nisi mattis, vestibulum orci quis, mattis sem. Sed posuere orci at metus eleifend, sed mollis magna convallis. Aenean blandit est nec sodales vulputate. Nullam massa ex, luctus sed orci convallis, rhoncus venenatis felis. Sed eget nunc eget velit facilisis lacinia. Nunc arcu elit, facilisis eget nisi sed, maximus consequat odio. Suspendisse sit amet dictum ex. Nunc eu suscipit felis.
Pineapple
Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.
Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.
Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.
L'accordéon est basé sur les éléments html details/summary. Le javascript transforme cette base pour permettre les animations et un meilleur contrôle, il ajoute aussi des attributs aria pour l'accessibilité. L'accordéon reste accessible au clavier comme pour le html de base.
Par défaut, l'accordéon suit le comportement de details/summary avec des onglets indépendant les uns des autres. L'ajout sur l'accordéon d'une option singletab limitera l'ouverture à un seul onglet à la fois.
De même, l'attribut natif open sur l'élément details est pris en compte.
Notez que l'apparence de l'accordéon ne changera pas si javascript est désactivé. Seul les animations et l'option singletab auront disparus.
Les états des onglets sont sauvegardés en localStorage : au rechargement de la page les panneaux seront retrouvés ouverts ou fermés tel qu'ils ont été laissés.