CODEWITHSUNDEEP
javascriptjquerycsshtml
dzordz
dzordz

Reputation: 2317

Show/Hide Div in jQuery, issue with "skipping" divs

I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide

The code looks like this in script:

$('.hideButton').click( function() {
    var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
    $('.first').animate({ width: toggleWidth},200);

    if ( $('.first').width() == 10 ){
        $(".content").attr("hidden",false);
    }
    else if ( $('.first').width() == 100 ){
        $(".content").attr("hidden",true);
    }

});

HTML:

<div class="contain">
    <div class="row">
            <div class="navigation">
                navigation
            </div>
            <div class="advert">
                advert
            </div>
    </div>
    <div class="row">
        <div class="main">
            main
            <br/>
            <button class="hideButton">hide</button>
            <br/>
            <div class="first">
                1
            </div>
            <div class="second">
                2
            </div>
            <div class="third">
                3
            </div>
        </div>
    </div>
</div>

CSS:

.row{
   margin-left:0px;
}
.navigation{
    height:100px;
    background-color:orange;
    width:400px;
    display:inline-block;
}
.advert{
    height:100px;
    background-color:lime;
    width:200px;
    display:inline-block;
}
.main{
    width:600px;
    height: 300px;
    background-color: magenta;
}
.first{
   width:100px;
    height:80%;
   background-color: yellow;
   display:inline-block;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
    display:inline-block;
}
.third{
   width:100px;
    height:80%;
   background-color: red;
    display:inline-block;
}

And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/

Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...

I just need that one div that gets hidden on click of button and that he does not affect anything else...

Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?

Upvotes: 0

Views: 580

Answers (3)

sbeliv01
sbeliv01

Reputation: 11830

Try adding this to your CSS:

.first,.second,.third {
    vertical-align: top;
}

During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.

Updated fiddle: http://jsfiddle.net/EhjeA/3/

Upvotes: 1

Mohamad
Mohamad

Reputation: 35349

You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/

.wrapper {
    display: inline-block;
    width: 100px;
}

<div class="wrapper">
  <div class="first">
    1
  </div>
</div>

Upvotes: 1

Tricky12
Tricky12

Reputation: 6820

Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.

JSFiddle Demo

.first{
   width:100px;
   height:80%;
   background-color: yellow;
   float: left;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
   float: left;
}
.third{
   width:100px;
   height:80%;
   background-color: red;
   float: left;
}

Upvotes: 2

Related Questions