jsplitter



    JSplitter is a JQuery plugin that can split your content with a movable splitter between them.

    1. Usage
    <script type="text/javascript" src="//cdn.jsdelivr.net/gh/arunskrish/jsplitter@1.4.0/jsplitter.min.js"></script>

    There are two modes supported (flex and non-flex). The flex mode is the easiest way to apply a slidable divider between two div contents. The non-flex mode is perfect for left sidebar menu's including bootstrap sidebars.

    2. Flex mode.

    Here, we expect three <div>s inside a flex container with middle one acting as the divider. Example -

    <div style="display:flex;">
        <div id='leftDiv' class="p-2"> This is the left box.</div>
        <div id='splitDiv' style="width:5px; background-color:gray;"></div>
        <div id='rightDiv' class="p-2">This is the right box</div>
    </div>
     $('#splitDiv').jSplitter({
        'leftdiv': 'leftDiv',
        'rightdiv': 'rightDiv',
        'flex': true
     })

    When JSplitter is applied, the width of the left div is changed when the divider is dragged.

    3. Non Flex mode.

    This mode expects the left div to have "position: relative" and the right div to have "position: fixed". The right div also has a left margin equal to the width of the left div to show the contents to the right of the left div. This is a very common technique used to display left navbar for websites. Example -

    <html>
    <head>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <style>
        #sidebar {
            width: 250px; position: fixed; top: 0; left: 0;height: 100vh; background: #ccc;
        }
        #content {
            position: relative; margin-left: 255px;
        }
        #vsplitter {
            width: 5px; position: fixed; margin-left: 250px; height: 100vh; background: url("data:image/gif;base64,R0lGODlhBQAXAIABAHNxbf///yH5BAEAAAEALAAAAAAFABcAAAIUDBypeJvXHHQP0Xmt1Avv2HHKVAAAOw==") no-repeat scroll center center;
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <!-- Left Sidebar -->
            <nav id="sidebar">
                <div class="sidebar-header"><h4>Bootstrap Sidebar</h4></div>
            </nav>

            <!-- Splitter -->
            <div id="vsplitter"></div>

            <!-- Right Content -->
            <div id="content"><h2> Main content </h2></div>
        </div>

        <!-- Bootstrap core JavaScript -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/gh/arunskrish/jsplitter@1.3.0/jsplitter.js"></script>
        <script type="text/javascript">
            $('#vsplitter').jSplitter({
                'leftdiv': 'sidebar',
                'rightdiv': 'content',
                'persist': true
            })
        </script>
    </body>
    </html>

    When the divider is dragged, the width of the left div and the left padding of the right div is changed. This makes the user able to change the width of the navbar.

    Please refer to the documentation for all options and live examples.