تنظیم ارتفاع منوی accordion

[majid1605]

سلام
کد زیر یه منوی accordion وقتی مقدار height رو روی auto میزارم افکتی که باهش منو باز میشه از بین میره

.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: right;
}
.ac-container label{
font-family: jDesign;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
direction:rtl;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
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:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
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 label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
left: 13px;
top: 7px;
background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);
}
.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;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
color: #777;
direction:rtl;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
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 input:checked ~ article.ac-small{
height: 60px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 230px;
}

خطوط آخر همه مربوط به تنظیم ارتفاع هستند


<div class="container">
<!-- jDesign top bar -->
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" />
<label for="ac-1">منوی شماره 1</label>
<article class="ac-medium"">
<p>متن دلخواه خود را وارد کنید.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" />
<label for="ac-2">منوی شماره 2</label>
<article class="ac-medium"">
<p>متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3">منوی شماره 3</label>
<article class="ac-medium"">
<p>متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. متن دلخواه خود را وارد کنید. </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4">منوی شماره 4</label>
<article class="ac-medium"">
<p>متن دلخواه خود را وارد کنید.</p>
</article>
</div>
</section>
</div>


چون برای نمایش متن ازش استفاده می کنم نیازه که ارتفاع خود به خود تنظیم بشه ارتفاع رو اگه بزارم روی هر عددی مشکلی پیش نمیاد فقط روی auto مشکل داره

[majid1605]

یعنی راهی واسه حل این مشکل کوچیک وجود نداره