jquery-resizable - A simple splitter panel


Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in. Note that Flexbox is not required, but used here to keep the layout simple.

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

This example creates two resizables for the horizontal and vertical splitter panes:

<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>