jquery 토글 자동 높이

Question

버튼을 클릭하여 높이를 확장 할 수있는 상자를 만들고 싶습니다. 상자는 텍스트의 단지 3 행을 기본값으로 표시합니다. (말하자면 높이는 50px이고 오버 플로우 함은 숨겨집니다.)

"추가"버튼을 클릭하면 상자 텍스트가 슬라이드 다운되도록 애니메이션을 적용합니다. 슬라이드를 또 하나 클릭합니다.

또한 "자동"높이로 슬라이드하고 싶습니다 !! (Slidedown은 콘텐츠 높이에 따라 다름) 많은 jquery 샘플을 시도했지만 실패했습니다. 누군가 제발 도와 줘? 여기

내 코드는

...

<div class="cmCnt"> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
AAA<br> 
</div> 


<a href="#" class="btnMore">more</a> 


.cmCnt { height:50px; overflow:hidden; } 

Answer 1

아, 이것이 내가 몇 년에 실행 문제입니다 것은 다시 ... 내 솔루션은 특별한 스타일로 시작하는 것이 었습니다 (예 : auto 높이, visible 오버 플로우), 자바 스크립트를 사용하여 요소의 전체 높이를 저장하십시오. 그런 다음 높이를 50px로 변경하고 페이지가로드 된 후 전환되지 않도록 숨겨진 상태로 오버플로합니다. 자, 전체 높이가 무엇인지 알면 원하는대로 움직일 수 있습니다. 이 같은

뭔가 :

$(document).ready(function() { 
    $('.cmCnt').each(function() { 
     var $this = $(this); 
     $this.data('originalHeight', $(this).height(); 
     $this.css({'height': '50px', 'overflow': 'hidden'}); 
     $this.click(function() { 
      var newHeight = $this.data('originalHeight'); 
      // animate $this to newHeight however you like here 
     }); 
    )); 
));