Art 114: Interactive Media and Design

Spring 2026 | Harrisburg Area Community College

Instructor: Rich Hauck, MPS

Radio Tabs

This example uses radio buttons to switch between tabs, so no JavaScript is needed.

It also uses a custom HTML element (tab-picker and tab-content).

The following CSS is used to hide inactive tabs:

body:has(#veni:not(:checked)) #tab-veni,
body:has(#vidi:not(:checked)) #tab-vidi,
body:has(#vici:not(:checked)) #tab-vici {
display: none;
}
View Example