Resizable Split Panel in Javascript by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <div id="main1" class="split"> <div class="split-child" id="split-0"> <div id="split-3">html</div> <div id="split-4">css</div> <div id="split-5">js</div> </div> <div id="split-1">output</div> </div> <button onClick="one();">Pannel one</button> <button onClick="two();">Pannel two</button> <button onClick="three();">Pannel three</button> HTML CSS JS Tidy .split { height:80vh; background: #ccc; } .split-child { display:flex; flex-direction: row; background: #ccc; } .gutter { background-color: #eee; background-repeat: no-repeat; background-position: 50%; } .gutter.gutter-horizontal { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); cursor: col-resize; } .gutter.gutter-vertical { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); cursor: col-resize; } HTML CSS JS Tidy var a; var b; var c; var d; function one(){ document.getElementById("main1").style.display = "block"; document.getElementById("split-0").style.display = "flex"; var a =Split(['#split-0', '#split-1'], { direction: 'vertical', }); var b = Split(['#split-3', '#split-4', '#split-5']); var c = Split(['#split-0', '#split-1'], { direction: 'horizontal', }); var d = Split(['#split-3', '#split-4', '#split-5'], { direction: 'vertical', }); c.destroy(); d.destroy(); document.getElementById("split-3").nextSibling.remove(); document.getElementById("split-4").nextSibling.remove(); document.getElementById("split-0").nextSibling.remove(); }; function two(){ document.getElementById("main1").style.display = "flex"; document.getElementById("split-0").style.display = "block"; var a =Split(['#split-0', '#split-1'], { direction: 'vertical', }); var b = Split(['#split-3', '#split-4', '#split-5']); var c = Split(['#split-0', '#split-1'], { direction: 'horizontal', }); var d = Split(['#split-3', '#split-4', '#split-5'], { direction: 'vertical', }); a.destroy(); b.destroy(); document.getElementById("split-3").nextSibling.remove(); document.getElementById("split-4").nextSibling.remove(); document.getElementById("split-0").nextSibling.remove(); } function three(){ document.getElementById("main1").style.display = "flex"; document.getElementById("split-0").style.display = "block"; var a =Split(['#split-0', '#split-1'], { direction: 'vertical', }); var b = Split(['#split-3', '#split-4', '#split-5']); var c = Split(['#split-0', '#split-1'], { direction: 'horizontal', }); a.destroy(); b.destroy(); document.getElementById("split-0").nextSibling.remove(); } one(); >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Resizable Split Panel in Javascript, Splitter is a type of layout that splits your container into side-by-side panels with a divider. Users can adjust the size of the horizontal and vertical of the panels by dragging the divider. Catagory Javascript Tags Resize Responsive Resource Add External Stylesheets and Script <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
