Текст на горизонтальном аккордеоне с высотой авто

Question

Когда я закрываю аккордеон, текст внутри него перемещается внизу, когда аккордеон закрывается, а высота увеличивается.

Посмотри здесь http://jsfiddle.net/D2HJZ/1/

Аккордеон HTML:

<div id="accordion1"> 
    <dl> 
     <dt> 
      <h1>Heading 1</h1> 
      <div class="accordionSlider"> 
       <span>text etc...</span> 
      </div> 
     </dt> 
    </dl> 
</div> 

Я изменил высоту авто в awsAccordion плагин:

//Set attrs for each li and div inside Horizontal  
for (i = 0; i < $(headLis).parent().find('dt').length; i++) { 
    $(headLis).parent().find('dt').eq(i).css({ 
      'width': settings.cssAttrsHor.liWidth + 'px', 
      'min-height':'100px', 
      'height': 'auto' 
     }).find('div.accordionSlider:first').css({ 
      'left': settings.cssAttrsHor.liWidth + 'px', 
      'width': methods.calcDivWidthHor() + 'px', 
      'min-height':'100px', 
      'height': 'auto' 
     }); 
    } 
} 

Я не знаю, как решить эту проблему, так ли какое-нибудь решение?
Подсказка: Спасибо.

Answer 1

использование Max-height или фиксированной height для него, и overflow:hidden;:

for (i = 0; i < $(headLis).parent().find('dt').length; i++) { 

       $(headLis).parent().find('dt').eq(i).css({ 
       'width': settings.cssAttrsHor.liWidth + 'px', 
       'min-height':'100px', 

       'max-height':'100px', 

       'overflow':'hidden', 
       'height': settings.cssAttrsHor.liHeight 

       }).find('div.accordionSlider:first').css({ 
       'left': settings.cssAttrsHor.liWidth + 'px', 
       'width': methods.calcDivWidthHor() + 'px', 
       'min-height':'100px', 
       'height': settings.cssAttrsHor.liHeight 
       }); 

      }