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.

shahirhossaini profile image Shahir Hossaini ・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)

pic
Editor guide
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. 😊