CODEWITHSUNDEEP
jquerycss
Ben
Ben

Reputation: 4319

How can I hide an element when it is outside (i.e. slid to the right) of its parent div?

I am trying to make a "slide in" toolbox on a div. When the div loads, the sliding content is moved all the way to the right of the parent, except a bit the user can click on. Then when they click it, the sliding content should slide in.

I use this function to slide in/out:

$(function () {
$("#clickme").toggle(function () {
    $(this).parent().parent().animate({right:'-40px'}, {queue: false, duration: 500});
}, function () {
    $(this).parent().parent().animate({right:'-320px'}, {queue: false, duration: 500});
});

});

See: http://jsfiddle.net/ySQgm/

However, when the slider is collapsed, you still see the content outside the div, but I want it to be hidden and then elegantly slide in.

Upvotes: 0

Views: 42

Answers (1)

Matthew Johnson
Matthew Johnson

Reputation: 5165

To the #container element, add

overflow:hidden;

That will leave just the arrow and edge visible.

Upvotes: 3

Related Questions