hide div 표시 (처음에는 200px로 표시)

Question

StackOverflow 멤버로 만든 코드를 사용하고 있습니다. 클릭시 표시 div를 숨기려면

내 문제는 이것을 확장하고 싶습니다.

데이터베이스에서로드하는 콘텐츠가 있는데, 높이는 약 500px입니다. 하지만 페이지로드시이 콘텐츠의 첫 번째 200 픽셀 높이 만 표시하므로 사용자는 '더보기'를 클릭하고 div의 나머지는 아래로 내려갑니다.

깔끔하게 유지하려면 가능한 경우 여기에 제공된 코드를 사용하여 JS가 깔끔하게 정리되도록하십시오.

숨길 코드/표시 함량까지이다

JS

$(document).ready(function() { 
$("#setup-ofi").click(function() { 
    $("#closeable-ofi").slideToggle(function() { 
     if ($(this).is(":visible")) { 
      $("#setup-ofi").text("Hide Details \u25b2"); 
     } 
     else { 
      $("#setup-ofi").text("Show Details \u25bc"); 
     } 
    }); 
}); 

});

html로

<h3>Property Details - <span class="sub-searchBlue"><a id="setup-ofi" href="javascript:;"> Show Details &#x25BC;</a></span></h3> 
    <div id="closeable-ofi" style="display:none"> 
    content of db shows here 
    </div> 

뿐인 : http://jsfiddle.net/3x2uG/

Answer 1

찾기 작업 샘플 : http://jsfiddle.net/ezmilhouse/Lt3LQ/

$("#setup-ofi").click(function() { 
    if ($("#closeable-ofi").css('height') === "100px") { 
     $("#closeable-ofi").animate({'height': '500px', 'overflow': 'visible'}, function(){ 
      $("#setup-ofi").text("Hide Details \u25b2"); 
     }); 
    } else { 
     $("#closeable-ofi").animate({'height': '100px'}, function(){ 
      $("#setup-ofi").text("Show Details \u25bc"); 
     }); 
    } 
}); 

변화 당신의 CSS를 사용하면 기본 DIV가 있어야하는데 얼마나 큰 알 수없는 경우에도 작동 http://jsfiddle.net/alnitak/cnHJw/에서

데모, :

#closeable-ofi { 
    height:100px; 
    overflow:hidden; 
} 

Answer 2

스타일 overflow: hidden에 설정 (200) 및 (500)

$('#myDiv').animate({height: 500}); 

사이의 요소의 height 재산의 전환을 애니메이션 효과를 사용하여 jQuery를 UI의 효과 모듈 "초과"콘텐츠가 흘러 나오지 않거나 200 픽셀 st에 스크롤바가 나타날 수 있도록 div 먹었다. 여기

var hidden = false; 
$('#show').click(function() { 
    if (hidden) { 
     $('#main').stop().animate({height: 20}); 
     $('#show').text('hide...'); 
    } else { 
     var h = $('#main').get(0).scrollHeight; 
     $('#main').stop().animate({height: h}); 
     $('#show').text('show...'); 
    } 
    hidden = !hidden; 
});