Introduction

Including jSplitter.js

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

Usage -

With flex based design

<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>
<script>
$('#splitDiv').jSplitter({
    'leftdiv': 'leftDiv',
    'rightdiv': 'rightDiv',
    'flex': true
})
</script>

With fixed/margin-left based design-

    <div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header p-3">
                <h4>Bootstrap Sidebar</h4>
            </div>
        </nav>

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

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

    <script type="text/javascript">
        $('#vsplitter').jSplitter({
            'leftdiv': 'sidebar',
            'rightdiv': 'content'
        });
    </script>

Options -

• leftdiv
  id of the left side div
  
  
• rightdiv
  id of the right  side div
  
  
• flex
  true/false to indicate if splitting a flex based structure.
  
  
• minleftwidth
  Minimum width of left panel to maintain when minimizing.
  
  
• maxleftwidth
  Maximum width of left panel when expanding.
  
  
• persist
  Whether to store expanded/collapsed widths and maintain it b/w page loads. This requires that the splitter div id should be unique across the website.
  
  
• cookie
  cookie name to use to store the width if persist option is provided.