CODEWITHSUNDEEP
jqueryhtmlcss
user2779544
user2779544

Reputation: 429

fill the empty space when toggling a div

I have two div left div should be of 30% width and rightdiv should occupy remaining space(70%).

HTML

<div class="leftDiv">
        menu
    </div>
    <div class="rightDiv">
        <span id="showdiv" style="float:left;cursor:pointer;">>>></span>content
    </div>

CSS 

.leftDiv{
        float:left;
        height:100% !important;
        width:30%;
        background:orange;
        }
        .rightDiv{
        float:left;
        height:100%;
        background:red;
        }

SCRIPT

    $(function(){
    var toggle=1;

        $('#showdiv').click( function() {   
        if(toggle==1){
            toggle=0;
            $(".leftDiv").toggle(600,function() {

            }); 
         $('.rightDiv').width('100%');
        }else{
            toggle=1;
            $(".leftDiv").toggle(600,function() {

             });
         $('.rightDiv').width('70%');
        } 


        });

    });

My problem is left div is not hideing smoothly i sense rightdiv gets 100% width before rightdiv hides.

Any help is appreciated.

Upvotes: 1

Views: 952

Answers (1)

EdenSource
EdenSource

Reputation: 3387

I doesn't really understand wich DIV your are trying to show/hide, but you could try this way. You should animate each element in the same time, and not use callback functions.

$('.rightDiv').animate({
    width: '100%'
}, 600)
$(".leftDiv").animate({
    width: '0%'
}, 600);

See if this fiddle is what you expected.

EDIT #1

http://jsfiddle.net/XXzbm/

EDIT #2

add this in the right DIV :

position:absolute;
right:0;

and remove float:right

http://jsfiddle.net/XXzbm/6/

Upvotes: 2

Related Questions