Svelte Simple Accordion

Quick start example

No styling. By default, no item opened after load.

My fist accordion item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

...the next one...

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

....and the last!

Donec suscipit massa in sem commodo, non fringilla justo mattis. Curabitur et varius lacus. Sed scelerisque lobortis risus nec sollicitudin.

reload
show code

Open after load

No styling. The second item is opened after load.

My fist accordion item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

...the next one...opened!

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

....and the last!

Donec suscipit massa in sem commodo, non fringilla justo mattis. Curabitur et varius lacus. Sed scelerisque lobortis risus nec sollicitudin.

reload
show code

Slow animation

No styling. First item opened. And a slooow animation.

Customer n° 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

Customer n° 007

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

reload
show code

No animation

No styling. First item opened. No animation.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

Vestibulum dapibus

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

Donec suscipit

Donec suscipit massa in sem commodo, non fringilla justo mattis. Curabitur et varius lacus. Sed scelerisque lobortis risus nec sollicitudin.

reload
show code

Listening to the title click

Quick start example + listening to the title click.

My fist accordion item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

...the next one...

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

....and the last!

Donec suscipit massa in sem commodo, non fringilla justo mattis. Curabitur et varius lacus. Sed scelerisque lobortis risus nec sollicitudin.

reload
show code

Styling everything

Customer informations
The big company
Referent
Dennis Watson
Role
Purchasing manager
Last order
2021-07-03
Address
Street
68 Dakota St
City
94107 San Francisco
State
California(CA)
Country
United States of America
Contact
eMail address
Mobile
(415) 647-1288
reload
show code

Sub-accordion

My fist accordion item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus libero, vulputate pretium est vitae, rutrum vestibulum nibh. Proin malesuada ultricies dolor, sit amet fringilla turpis efficitur faucibus.

This item contains another accordion

A sub-accordion

Vestibulum dapibus, lectus et pretium dictum, odio metus maximus nunc, eget accumsan magna sem quis ante. Suspendisse potenti.

Click me!

Only THIS sub-accordion display changes :)

....the last item

Donec suscipit massa in sem commodo, non fringilla justo mattis. Curabitur et varius lacus. Sed scelerisque lobortis risus nec sollicitudin.

reload
show code