隐藏显示div（但显示前200px）

Question

I am using some code from a fiddle made by a member of StackOverflow. To hide show divs on click.

My issue is I wish to extend this , I will explain.

I have content loading from database, which lets say is approx 500px in height. But On page load, I only want to show the first 200px height of this content, so user can click "Show More" and the remainder of the div slides down.

To keep things tidy, I would like to extend the use of the code , given on here if possible, so that my JS is tidy.

The code to hide/show content thus far is:

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");
        }
    });
});

});

The 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>

FIDDLE : http://jsfiddle.net/3x2uG/

Answer 1

Use jQuery UI's effects module to animate transitions of the element's height property between 200 and 500.

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

Set the style overflow: hidden on the div so that the "excess" content doesn't spill out or cause a scrollbar to appear when in the 200 pixel state.

Demo at http://jsfiddle.net/alnitak/cnHJw/ , which works even if you don't know how big the underlying div is supposed to be:

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;
});

Answer 2

Find working sample here: 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"); 
        });
    }
});

change your css:

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