Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create an Accordion Menu with CSS

Miguel Palau
Miguel Palau
24,176 Points
Posted by Miguel Palau
Miguel Palau
24,176 Points

Any proper way to set the height for this to scale?

Adding the max-height thing seems a bit dirty

Unsubscribed User
Unsubscribed User
16,354 Points

Setting height will make the .tab-content containers grow to a fixed height. If you have one line of text or eighty in the content you will have a lot of blank space or overflow. It comes down to an asthetic choice.

Setting max-height will allow a container with content to grow up to that maximum value, but it will only take up the actual height it needs to fill the box model for that content. You can see this in action by adding more ipsum to some of the tab paragraphs (and more max-hight to the ".tab input:checked ~ .tab-content" on line 49)

I recommend that you should try it out, play with adding more lines of ipsum to one of the tabs. Then, to see what happens, use:

.tab-content {
    height: 0;
}
.tab input:checked ~ .tab-content { 
    height: 16.25em;
}

Remember to change max-height to height in both places.