CODEWITHSUNDEEP
jquery
beek
beek

Reputation: 3746

jquery Slide toggle parent not child

I have this code

    $('#textButton').click(function() {
        $('#textContainer').slideToggle('slow');
    });

textButton is a child of textContainer.

Which is a basic tab at the bottom of the page I want to slide up and down when the button is clicked.

Currently clicking once slides it down, and the button does it's own slide away animation so it dispears.

Any way to stop the button sliding away, and sliding the parent container only?

Here is a very rough fiddle http://jsfiddle.net/3su2ekjy/1/

Upvotes: 1

Views: 674

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

slideToggle() displays or hides the element.

You can not hide the parent without hiding all the parent's children.

So if you must keep the child element visible, you must not have it be a child of the parent element anymore and put it outside of it. Re-arrange your html.

Upvotes: 0

Moshtaf
Moshtaf

Reputation: 4903

Do you mean something like this:

Check JSFiddle Demo

If yes so use this JS:

$('#textButton').click(function() {
    $('#textContainer #text').slideToggle('slow');
});

When you toggle the container it's obvious that all of childrens (include the button) disappear too.

Upvotes: 4

Related Questions