From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Interactive tab panels

Interactive tab panels - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Interactive tab panels

“

- [Chris] Hi, this is Chris Converse and in this episode, we'll complete an interactive, tabbed panel interface, using only HTML and CSS, this will give us the ability to add more content to a web page, while allowing your users to decide what content they'd like to see, so if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in a text editor and so with the HTML file opened in a text editor and a web browser, if I scroll through the code in a text editor, all of the content is in a div with an id of panels, inside of the panels div are three radio buttons, these three radio buttons here in the browser are showing up right here, next we have a navigation element with three labels, those are those items right here and if I scroll down even further, we can see the three different panels and in the browser, if I scroll down, we can see the three panels here. So what we're going to be doing is hiding the radio buttons and activating the…

Contents