From the course: Modern CSS Techniques without JavaScript

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Creating an accordion that's initially open

Creating an accordion that's initially open

From the course: Modern CSS Techniques without JavaScript

Start my 1-month free trial Buy for my team

Creating an accordion that's initially open

“

- [Instructor] In our previous video, I gave you the starting text for this particular CodePen and asked you to mark it up with details and summary elements. So, here is the way that I went about doing that. Just before Sustainable Landscaping, I started my details element. I put the summary tags around the words Sustainable Landscaping, And then I have a paragraph of information, followed by /details. And that pattern continues for the other two items. So, my details tag starts on line eight, it ends on line 11. In between, we have Planting Plans inside of the summary tags, and then, finally, down on line 12, we start details, we end that on line 15, and we have our summary tags around Water Features and Garden Structures. The result is a page that looks like this where I have three possible accordion items. And a few things to notice about this, first of all, none of them are open by default. That's what I'm going to show you in just a moment. The second part is, of course, that I…

Contents