Building Vertical Tabs Without JavaScript: The Radio Button Hack

Tabs are usually built with JavaScript, but CSS can do it alone. I built a vertical tabs component using hidden radio buttons.

In this article you will learn:

• How hidden radio inputs remember the selected tab
• How the ~ selector connects an input to the content that follows it
• How to slide an indicator by changing its top value with a transition
• Where the trick breaks: a fixed number of tabs and no keyboard support when inputs use display: none

Live demo: https://muhammaduzairkhalid15.github.io/CSS-Vertical-Tabs-Uzi-Solutions/ Source code: https://github.com/MuhammadUzairKhalid15/CSS-Vertical-Tabs-Uzi-Solutions

Have you used this trick before? Tell me in the comments.