increase width of div to take up available space when div is hidden

Question

I have 3 divs. When you click "HIDE" on divChaptersHide (div1) it will be hidden to reveal another div (divChaptersExpand) that has a smaller width. When you then click on "EXPAND" on divChaptersExpand it hides that div and then reveals divChaptersHide again. You can also do all of this with div 3 (divPowerPointExpand). The problem I am having is that I need div 2 to stretch the entire width of the available space when the text in div 1 (or div 3) is clicked on. Thanks for the help!

HTML

<div style="margin:0 auto">
<!--CHAPTERS DIV-->
<div id="divChaptersHide" style="width:20%;background:black;color:white;float:left;height:300px;">
    <div style="padding:0 10px"><p id="chaptersHideText" style="text-align:right">HIDE</p></div>
</div>
    <!--POWERPOINT EXPAND DIV-->
    <div id="divChaptersExpand" style="display:none;width:100px;background:black;color:white;float:left;height:300px;">
        <p id="chaptersExpandText" >EXPAND</p>
    </div>
<!--VIDEO DIV-->
<div id="divMainVideo" style="width:60%;background:purple;color:white;float:left;height:300px"></div>
<!--POWERPOINT DIV-->
<div id="divPowerPointHide" style="width:20%;background:black;color:white;float:right;height:300px">
    <div style="padding:0 10px"><p id="powerPointHideText" style="text-align:left"><a>HIDE</a></p></div>
</div>
    <!--POWERPOINT EXPAND DIV-->
     <div id="divPowerPointExpand" style="display:none;width:100px;background:black;color:white;float:right;height:300px;">
        <p id="powerPointExpandText" >EXPAND</p>
    </div>

jQuery

$(function(){
        chaptersHide();    
        powerPointHide();
        expandChapters();
        expandPowerPoint();
    });

function chaptersHide(){
        $("#chaptersHideText").click(function(){
            $("#divChaptersHide").hide("scale", {percent:0, origin: 'top'}, 500);
            setTimeout(function(){$('#divChaptersExpand').show("drop",{direction:'left'},500)}, 500);
        });
    }

function powerPointHide(){
        $("#powerPointHideText").click(function(){
            $("#divPowerPointHide").hide("scale", {percent:0, origin: 'top'}, 500)
            setTimeout(function(){$('#divPowerPointExpand').show("drop",{direction: 'right'},500)},500);
        });
    }

function expandChapters(){
        $('#chaptersExpandText').click(function(){
            $('#divChaptersExpand').hide("drop", { direction: "left" }, 500);
            setTimeout(function(){$('#divChaptersHide').show("scale", {origin:'top'}, 500)},500);
            });
    }

function expandPowerPoint(){
    $('#powerPointExpandText').click(function(){
            $('#divPowerPointExpand').hide("drop", { direction: "right" }, 500);
            setTimeout(function(){$('#divPowerPointHide').show("scale", {origin:'top'}, 500)},500);
            });
    }

JSFiddle

Answer 1

I edited your JsFiddle to accomplish what you are trying to do.

I nested another "setTimeout()" function within your existing ones that 'dynamically' resizes your main divs.

This solution is a patch job, but it will give you an idea of how to accomplish creating a 'callback' function for each of your setTimeout() functions.

UPDATE: Here is the fiddle example without the setTimeout() functions and with a smoother transition. If you still see the glitch where EXPAND pushes the POWERPOINT div down, just subtract more than 200px from the 'reducedWidth' variable.

$(function(){
        chaptersHide();    
        powerPointHide();
        expandChapters();
        expandPowerPoint();
    });
function chaptersHide(){
        $("#chaptersHideText").click(function(){
            $("#divChaptersHide").hide("scale", {percent:0, origin: 'top'}, 500, function(){
                $('#divChaptersExpand').show("drop",{direction:'left'},500, function(){
                    setVideoWidth(); 
                });
            });

        });

    }
function powerPointHide(){
        $("#powerPointHideText").click(function(){
            $("#divPowerPointHide").hide("scale", {percent:0, origin: 'top'}, 500, function(){
                $('#divPowerPointExpand').show("drop",{direction: 'right'},500, function(){
                    setVideoWidth();
                });
            });
        });
    }
function expandChapters(){
        $('#chaptersExpandText').click(function(){
            var reducedWidth = $('#divMainVideo').width() - 200;
            $('#divMainVideo').animate( { width: reducedWidth }, 500 );
            $('#divChaptersExpand').hide("drop", { direction: "left" }, 500, function(){
                $('#divChaptersHide').show("scale", {origin:'top'}, 500, function(){
                    setVideoWidth(); 
                });
            });
        });
    }
function expandPowerPoint(){
    $('#powerPointExpandText').click(function(){
        var reducedWidth = $('#divMainVideo').width() - 200;
        $('#divMainVideo').animate( { width: reducedWidth }, 500 );
        $('#divPowerPointExpand').hide("drop", { direction: "right" }, 500, function(){
            $('#divPowerPointHide').show("scale", {origin:'top'}, 500, function(){
                setVideoWidth(); 
            });
        });
    });
}

function setVideoWidth(){
    var total = getCurrentTotalWidth();
    var chapters = getCurrentChaptersWidth();
    var powerpoint = getCurrentPowerpointWidth();
    var video = $('#divMainVideo').width();

    var space = total - chapters - powerpoint - video;
    var newWidth = space + video;
    $('#divMainVideo').animate( { width: newWidth }, 250 );
}

function getCurrentTotalWidth(){
    return $('div:first').width();
}
function getCurrentChaptersWidth(){
    if( $("#divChaptersHide").css('display') !== "none" ){
        return $("#divChaptersHide").width()
    }
    else{
        return $('#divChaptersExpand').width();
    }
}
function getCurrentPowerpointWidth(){
    if( $("#divPowerPointHide").css('display') !== "none" ){
        return $("#divPowerPointHide").width()
    }
    else{
        return $('#divPowerPointExpand').width();
    }
}