jQuery toggle slide element but not completely hide element

Question

The following example is probably the easiest way to try and explain the effect I'm trying to achieve:

Code:

$(function() {
    $('#handle').click(function() {
        $('#box').toggle('slide', { direction: 'right' });
    });
});

Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.

How do you keep it anchored to that left edge of the box though? — chinabuffet
– chinabuffet, Commented Apr 2, 2013 at 4:38

jfriend00 · Accepted Answer · 2013-04-02 05:13:01Z

2

You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:

$(function() {
    $('#handle').click(function() {
        $('#box').animate({width: "0px"}, 1000);
    });
});

But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.

$(function() {
    $('#handle').click(function() {
        var box = $('#box');
        var targetWidth = box.width() > 0 ? 0 : 150;
        box.animate({width: targetWidth + "px"}, 1000);
    });
});

edited Apr 2, 2013 at 5:13

answered Apr 2, 2013 at 4:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery toggle slide element but not completely hide element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related