CSS Accordion Collection
18 Pure CSS Accordions

As a passionate web developer for speed, I always try to use pure HTML, CSS, and minimalistic JavaScript code inside all my websites.

That's why all these CSS accordions were developed just like that with only pure HTML and CSS.

Feel free to get inspired with them and create your own versions based on these combinations.

If you want to learn how create accordions like these please feel free to check the tutorials below or if you want you can also buy this full CSS accordion collection by clicking here.

Tutorials

1) How to make pure CSS accordion

2) Plus and minus signs accordion.

3) Font Awesome arrows accordion.

4) CSS accordion animation.

Pure CSS Accordions with Animations

Green Accordion Demo #1

This is a pure HTML & CSS accordion with a simple animation.

White Accordion Demo #2

This is a pure HTML & CSS accordion with a simple animation and shadows on the sides of the main content.

Round Grey Accordion Demo #3

This is a pure HTML & CSS accordion with a simple animation and round corners inside the title and content.

Zoom Grey Accordion Demo #4

This is a pure HTML & CSS accordion with a simple zoom animation and semi round corners inside the title and content.

Blue Accordion Demo #5

This is a pure HTML & CSS menu accordion with a simple animation and semi round corners inside the title and content.

Orange Accordion Demo #6

This is a pure HTML & CSS menu accordion with a simple animation and semi round corners inside the title and content.

Dark Green Accordion Demo #7

This is a pure HTML & CSS menu accordion with a simple zoom animation and semi round corners inside the title and content.

White Green Accordion Demo #8

This is a pure HTML & CSS accordion with a simple arrow animation and green shadows on the sides of the main content.

Purple Accordion Demo #9

This is a pure HTML & CSS menu accordion with a simple accordion animation and with a simple rotating plus icon.

Blue Accordion Demo #10

This is a pure HTML & CSS menu accordion with a simple accordion animation and with a simple rotating plus icon.

Shapire Accordion Demo #11

This is a pure HTML & CSS menu accordion with a simple accordion animation and with a simple rotating plus icon.

White Accordion Demo #12

This is a pure HTML & CSS menu accordion with a simple accordion animation and with a simple on/off animated button.

Round Red Accordion Demo #13

This is a pure HTML & CSS accordion with a simple animation and round corners inside the title and content.

Round Green Accordion Demo #14

This is a pure HTML & CSS accordion with a simple animation and round corners inside the title and content.

Round White Accordion Demo #15

This is a pure HTML & CSS accordion with a simple animation and round corners inside the title and content.

Round Blue Accordion Demo #16

This is a pure HTML & CSS accordion with a simple animation and round corners inside the title and content.

Black & White Accordion Demo #17

This is a pure HTML & CSS accordion with a simple pen animation and grey shadows on the sides of the main content.

Green Accordion Demo #18

This is a pure HTML & CSS accordion with a simple pen animation and green shadows on the sides of the main content.

Questions? Click Here

Buy Accordions