Question

I’ve been trying to find a more elegant way to do this function but have not yet figured it out. I have 2 divs that I’d like to resize upon execution of a function. One will slide away (width:’0%’) and the other fills the remaining space (width:’100%’). The code below works great but seems a little heavy. Any suggestions for making it cleaner?

function testAct(){             
    $('#sideBar').animate({width:'0%'},500);        
    $('#map_canvas').animate({width:'100%'},500,function(){google.maps.event.trigger(map,'resize')});                       
    if (document.getElementById('map_canvas').style.width == '100%')
    {
        $('#sideBar').animate({width:'25%'},500);       
        $('#map_canvas').animate({width:'75%'},500,function(){google.maps.event.trigger(map,'resize')});                        
    }
}

Answer 1

I would do something like this so you don’t repeat yourself:

function testAct(){
    var newSideBarWidth,newMapCanvasWidth;
    if(document.getElementById('map_canvas').style.width == '100%'){
        newSideBarWidth = "25%";
        newMapCanvasWidth = "75%";
    }
    else{
        newSideBarWidth = "0%";
        newMapCanvasWidth = "100%";    
    }
    $('#sideBar').animate({width:newSideBarWidth },500);       
    $('#map_canvas').animate({
        width: newMapCanvasWidth 
    },
    function(){
        google.maps.event.trigger(map,'resize')
    });  
}