Expanding Text with code (no plugin)

Wondering if anyone can help me figure this out.

http://jsfiddle.net/E4acF/77/

I’m trying to use the code in that link to create expandable text. I like the way everything’s formatted except that the height is fixed and I want it to expand dynamically based on the content within.

I tried to change

.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height: 300px;
}

to

.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height: auto;
}'

which works kind of…the problem is that the smooth expansion is gone, now it jumps abruptly to the size of the content.

Is there any way to keep that animation and have the expansion open smoothly?

I know my way around WordPress well enough, but when it comes to code…I don’t really know what I’m doing.

This is the theme I’m using: http://demo.themesandco.com/