DEV Community

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

Posted on

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

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

Top comments (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
 
shahirdev profile image
Shahir Hussaini

Thanks, Dear Jozsef.

I have checked yours it's better than mine.

I appreciate your time. 😊