DEV Community

loading...
Cover image for Learn how to make Animated Tab-Layout using HTML | CSS | and Pure JS.

Learn how to make Animated Tab-Layout using HTML | CSS | and Pure JS.

Shahir Hossaini
Developer, Mentor, Speaker, YouTuber, Organizer ( GDG Balkh )
・1 min read

If you're learning HTML, CSS, and JavaScript be sure to like and subscribe to my channel and never miss tips like this. 👇

Tutorial: https://youtu.be/OM8tE5nojDk
Twitter: https://twitter.com/shahir_dev
Telegram: https://t.me/WeeklyTipsWithShahir

Discussion (2)

Collapse
polgarj profile image
Jozsef Polgar • Edited

Hi Shahir!

This is a really nice animation, I like it a lot.

I edited your work and now it works without javascript.
I also changed the html, to make it semantically correct, and accessible.

The trick is, that I changed the list items to radio buttons, and used the :checked selector on the input tags.

Please check it:
jsfiddle.net/polgarj/96hgm27c/6/

Collapse
shahirhossaini profile image
Shahir Hossaini Author

Thanks, Dear Jozsef.

I have checked yours it's better than mine.

I appreciate your time. 😊