From the course: CSS Shorts

Unlock this course with a free trial

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

Accordion panels

Accordion panels - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Accordion panels

“

- [Chris] Hi, I'm Chris Converse, and in this episode, we'll use HTML radio buttons in conjunction with the sibling combinator selector in CSS to create an interactive accordion. So if you'd like to follow along with me, download the exercise files, and let's begin by opening the HTML file in a text editor. And so, inside the HTML file, let's come in here and take a look at the structure. So if we scroll down a little bit, there's a div with a class of accordion. And then inside of the accordion class, I have another div with a class of panel. Inside of the panel, there's a radio button. Then there's a label element. And then we have a div element that contains all of the content. And now, the for attribute on the label element which matches the id of the radio button allows the label to hide the radio button. And if you have this opened in a browser, you'll see the radio button showing up here, and we're going to hide those later on. Now if we scroll through the rest of the page…

Contents