Resizable Splitter Panels

Live Demo

Horizontal Splitter Panes:

left panel
right panel
left panel (same ids)
right panel (same ids)
left panel 2
right panel 2

Vertical Splitter Panes:

top panel
bottom panel
html,
    body {
        height: 100%;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        padding: 0;
        margin: 0;
        overflow: auto;
    }

    .page-container {
        margin: 20px;
    }

    /* horizontal panel*/
    .panel-container {
        display: flex;
        flex-direction: row;
        border: 1px solid silver;
        overflow: hidden;
    }

    .panel-left,
    .panel2-left {
        flex: 0 0 auto;
        /* only manually resize */
        padding: 10px;
        width: 300px;
        min-height: 200px;
        min-width: 150px;
        white-space: nowrap;

        background: #838383;
        color: white;
    }

    .splitter,
    .splitter2,
    .splitter3 {
        flex: 0 0 auto;
        width: 18px;
        background: url(../assets/vsizegrip.png) center center no-repeat #535353;
        min-height: 200px;
        cursor: col-resize;
    }

    .panel-right,
    .panel2-right {
        flex: 1 1 auto;
        /* resizable */
        padding: 10px;
        width: 100%;
        min-height: 200px;
        min-width: 200px !important;
        /* NOTE: This won't be respected! Explicit size of left forces the size to be fixed */
        background: #eee;
    }

    /* vertical panel */
    .panel-container-vertical {
        display: flex;
        flex-direction: column;
        height: 500px;
        border: 1px solid silver;
        overflow: hidden;
    }

    .panel-top {
        flex: 0 0 auto;
        /* only manually resize */
        padding: 10px;
        height: 150px;
        width: 100%;
        white-space: nowrap;

        background: #838383;
        color: white;
    }

    .splitter-horizontal {
        flex: 0 0 auto;
        height: 18px;
        background: url(../assets/hsizegrip.png) center center no-repeat #535353;
        cursor: row-resize;
    }

    .panel-bottom {
        flex: 1 1 auto;
        /* resizable */
        padding: 10px;
        min-height: 200px !important;
        /* NOTE: This won't be respected! Explicit resize forces size of this panel */
        background: #eee;
    }

    label {
        font-size: 1.2em;
        display: block;
        font-weight: bold;
        margin: 30px 0 10px;
    }

    pre {
        margin: 20px;
        padding: 10px;
        background: #eee;
        border: 1px solid silver;
        border-radius: 4px;
        overflow: auto;
    }
<label>Horizontal Splitter Panes:</label>

<div class="panel-container">

    <div class="panel-left">
        left panel
    </div>

    <div class="splitter">
    </div>


    <div class="panel-right">
        right panel
    </div>
</div>
<button id="btnUnbind" style="margin: 30px 0 0; height: 35px; width: 190px;">Unbind Horizontal Resizers</button>

<div class="panel-container" style="margin-top: 50px;">

    <div class="panel-left">
        left panel (same ids)
    </div>

    <div class="splitter">
    </div>

    <div class="panel-right">
        right panel (same ids)
    </div>
</div>

<div class="panel-container" style="margin-top: 50px;">
    <div class="panel2-left">
        left panel 2
    </div>

    <div class="splitter2">
    </div>

    <div class="panel2-right">
        right panel 2
    </div>
</div>

<label>Vertical Splitter Panes:</label>
<div class="panel-container-vertical">

    <div class="panel-top">
        top panel
    </div>

    <div class="splitter-horizontal">
    </div>

    <div class="panel-bottom">
        bottom panel
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../src/jquery-resizable.js"></script>
<script>
    $(".panel-left").resizable({
        handleSelector: ".splitter",
        resizeHeight: false
    });
    $(".panel-top").resizable({
        handleSelector: ".splitter-horizontal",
        resizeWidth: false
    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.