CODEWITHSUNDEEP
javascriptjqueryjquery-ui
vol7ron
vol7ron

Reputation: 42109

expand/contract container on hide/show animation

I thought there was an easy way to make the container height fluid during an animation's resizing, but if so I've forgotten. Before I do it programmatically, I thought I'd test me luck here.

The idea is that the bottom <hr /> should gracefully move up/down as #content is animating, instead of snapping in place after the animation - this is due to the #container not resizing.

See Fiddle

HTML:

<button id="trigger">trigger</button>
<hr />
<div id="container">
    <div id="content">foo
        <br />foo
        <br />foo
        <br />foo
        <br />foo
        <br />
    </div>
</div>
<hr />

JS:

$('#trigger').click(function () {
    var $content = $('#content');
    if (!$content.hasClass('hidden')) {
        $content.stop(true, true).hide('drop', {
            easing: 'easeInQuad',
            direction: 'up'
        }, 'slow');
        $content.addClass('hidden');
    } else {
        $content.stop(true, true).show('drop', {
            easing: 'easeInQuad',
            direction: 'up'
        }, 'slow');
        $content.removeClass('hidden');
    }
});

Upvotes: 1

Views: 1032

Answers (2)

vol7ron
vol7ron

Reputation: 42109

Fiddle

Thought there'd be a CSS solution. Instead, it looks like animate works; however, it's a simple slide/fade, and doesn't use drop:

$('#trigger').click(function () {
    var $content = $('#content');
    if (!$content.hasClass('hidden')) {
        $content.stop(true,true).animate({height:'hide',opacity:'hide'},'slow','easeInQuad');
        $content.addClass('hidden');
    } else {
        $content.stop(true,true).animate({height:'show',opacity:'show'},'slow','easeInQuad');
        $content.removeClass('hidden');
    }
});

Upvotes: 0

kunalbhat
kunalbhat

Reputation: 1719

Can you just use slideToggle to resize your container to achieve this effect?

jQuery

$('#trigger').on('click', function() {
  var $content = $('#content');
  $content.slideToggle(1000);
});

JSFiddle example.

Upvotes: 1

Related Questions