javascript - ボタンでdivの高さを変更する

Question

このサイトで実行される TYPO3 拡張機能/モジュールのようなスクリプトが必要です: http://nyati-safari.dk/index.php?id=125 (スクロールして: Detaljeret Dagsprogram (inkluderet))。

div はピクセル固有の高さで表示され、矢印をクリックすると、div はコンテンツ固有の高さに変化し、div がトグルすると矢印も変化します。

Answer 1

これを行う：

var div = $('#div');

$('#arrow').click(function () {
    if (div.height() == 100) {
        autoHeight = div.css('height', 'auto').height();
        div.height(100).animate({
            height: autoHeight
        }, 500);
    } else {
        $('#div').animate({
            height: '100'
        }, 500);
    }
});

JSFiddle: http://jsfiddle.net/ZG8ug/5/

次のようなこともできます: http://jsfiddle.net/ZG8ug/6/ここで、「非表示」の div はページの読み込み時に小さいですが、表示して返されると大きくなります。ユーザーが既に閲覧したものを区別するのに役立つ場合があります。逆にそれを行うこともできるので、表示されたときに div が占めるスペースがさらに少なくなります。