Get started with split.js CDN

MIT licensed

Split.js: Create resizable, detachable, draggable web panes.

Tags:
  • css
  • split
  • flexbox
  • tiny
  • split-layout

Stable version

Copied!

How to start using split.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with split.js CDN - cdnhub.io</title>
  <style>
    #pane1, #pane2 {
      width: 50%;
      height: 100px;
      background-color: #ddd;
      float: left;
    }
  </style>
</head>
<body>
  <div id="container" style="height: 200px; border: 1px solid #ccc;">
    <div id="pane1">Pane 1</div>
    <div id="pane2">Pane 2</div>
  </div>
  <script src="https://cdn.cdnhub.io/split.js/1.6.5/split.min.js"></script>
  <script>
    const container = document.getElementById('container');
    const panes = [document.getElementById('pane1'), document.getElementById('pane2')];

    const split = new Split(container, {
      sizes: [30, 70],
      direction: 'horizontal'
    });

    split.on('resize', () => {
      console.log('Resized:', split.size);
    });

    split.resize();
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions