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.