CSS3 Accordion with Automatic Height - html

Question

I'm trying to figure out how to make the height of each accordion div automatic, but it messes up the transition. Is there anyway to make the height 100% or automatic so I won't have to set it? http://jsfiddle.net/Rusxy/
HTML
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked />
<label for="ac-1"><span>Honda Accordion</span></label>
<article class="ac-small">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" />
<label for="ac-2"><span>Accordion to Jim</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3"><span>Accordion 3</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4"><span>Accordion 4</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
</section>
CSS
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label span{
display: block;
background: transparent url(arrow_down.png) no-repeat right center;
}
.ac-container input:checked + label{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 230px;
}

Answer 1

One idea that I have had. Not perfect, but may be gets you going.
CSS
.ac-container{
width: 200px;
margin: 10px auto 30px auto;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label span{
display: block;
background: transparent url(arrow_down.png) no-repeat right center;
}
.ac-container input:checked + label{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: auto;
position: relative;
z-index: 10;
transition:
height .3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 0px;
font-size: 14px;
padding: 0px 20px;
margin: 0px 14px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
transition: all .6s;
}
.ac-container input:checked ~ article p {
padding: 20px;
line-height: 23px;
}
Set the article to height auto, and make the p changing it's real size (changing the line-height, there are other posibilities).
fiddle