SOURCE

isVisableTree = true;

$(".middle").click(function() {
    var $partLeft = $(".left");
    var $partRight = $(".right");
    if (isVisableTree) {
        $partLeft.hide();

        $partRight.attr("style", "margin-left:0;width:100%");

        isVisableTree = false;

    } else {
        $partLeft.show();

        $partRight.attr("style", "width:83.4%");
        $partRight.attr("style", "margin-left:0;width:100%");

        isVisableTree = true;
    }
});

<div class="top">
</div>
<div class="all">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
        <div class="rtop">
        </div>
        <div class="rmiddle">
        </div>
        <div class="rbottom">
        </div>
    </div>
</div>

div {
    position: relative;
}

.top {
    background-color: #333;
    width: 500px;
    height: 10px;
}

.all {
    background-color: #eee;
    width: 500px;
    height: 200px;
	display: flex;
}

.left,
.middle,
.right {
    height: 100%;
    float: left;
}

.left {
    background-color: #224488;
    width: 100px;
}

.middle {
    background-color: #55aacc;
    width: 10px;
}

.right {
    background-color: #bbb;
    /* width: 300px; */
	flex: 1;
}

.rtop,
.rmiddle,
.rbottom {
    width: 100%;
}

.rtop {
    background-color: #00ccaa;
    height: 30%;
}

.rmiddle {
    background-color: #E91E63;
    height: 10px;
}

.rbottom {
    background-color: #03A9F4;
    height: 30%;
}