CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tom
Tom

Reputation: 446

Stop jQuery slide down effect from moving content below?

I have 4 'tabs' at the top of my page, which, when clicked, slide down to reveal a hidden div using the jQuery slide down function. The problem is that I don't want the 4 static 'tabs' to be affected by this. I want them to remain in the same position. I can't seem to find a away to stop them moving down when the hidden div is revealed.

Here is a JSFiddle of my code: https://jsfiddle.net/k6nzyrhm/

And here is the CSS for the static tabs:

.static {
    width: 160px;
    height: 120px;
    float: left;
    text-align: center;
    margin: 250px 35px 0 35px;
}

Please does somebody know a way to stop the 4 static 'tabs' at the bottom from moving down when the hidden div is revealed. Thanks.

Upvotes: 0

Views: 1239

Answers (1)

cch
cch

Reputation: 3386

Use position: absolute on .content. Absolutely positioned elements won't push the rest of the content down.

.content {
    height: 0px;
    width: 880px;
    margin-left: 20px;
    overflow: hidden;
    background-color: #e62d67;

    /* properties added */
    position: absolute;
    top: 240px;
}

See Example.

Upvotes: 2

Related Questions