Basic Split Layout In Vanilla JavaScript – SplitterBar

A responsive split layout plugin in vanilla JavaScript that allows you to adjust the width of the split panels by dragging the splitter bar.

How to use it:

Link to  SplitterBar’s JavaScript and Stylesheet.

<link href="SplitterBar.css" rel="stylesheet">
<script src="splitterbar.js"></script>

Create a container for the split layout.

<div id="container">
</div>

Split the container into 2 split panels.

const div1 = document.createElement('div');
div1.style.backgroundColor = 'yellow';
const div2 = document.createElement('div');
div2.style.backgroundColor = 'green';

const div1Content = document.createElement('div');
div1Content.innerHTML = 'Left side';
div1Content.classList.add('div-1-content')
div1.appendChild(div1Content);
const div2Content = document.createElement('div');
div2Content.innerHTML = 'Right side';
div2Content.classList.add('div-2-content')
div2.appendChild(div2Content);
const splitterBar = new SplitterBar(document.getElementById('container'), div1, div2);

Changelog:

03/27/2019

• JS update