I want to use Split.js for creating my specific layout like

<div id="a" class="split split-horizontal">
</div>
<div id="b" class="split split-horizontal">
    <div id="d" class="split content"></div>
    <div id="e" class="split content"></div>
    <div id="f" class="split content"></div>
</div>
<div id="c" class="split split-horizontal">
</div>

<script>
    Split(['#a', '#b', '#c'], {
        gutterSize: 20,
        cursor: 'pointer'
    });
    Split(['#d', '#e', '#f'], {
        direction: 'vertical',
        sizes: [15, 70, 15],
        gutterSize: 20,
        cursor: 'row-resize'
    });
</script>

but above code does not work.

Can anyone help me? How can I create the layout with Split.js because does not exist any sample like that in their site?

Classic sample in JSFiddle

My Sample in JSFiddle

I want to use Split.js for creating my specific layout like

<div id="a" class="split split-horizontal">
</div>
<div id="b" class="split split-horizontal">
    <div id="d" class="split content"></div>
    <div id="e" class="split content"></div>
    <div id="f" class="split content"></div>
</div>
<div id="c" class="split split-horizontal">
</div>

<script>
    Split(['#a', '#b', '#c'], {
        gutterSize: 20,
        cursor: 'pointer'
    });
    Split(['#d', '#e', '#f'], {
        direction: 'vertical',
        sizes: [15, 70, 15],
        gutterSize: 20,
        cursor: 'row-resize'
    });
</script>

but above code does not work.

Can anyone help me? How can I create the layout with Split.js because does not exist any sample like that in their site?

Classic sample in JSFiddle

My Sample in JSFiddle

• javascript
• split.js

• Define does not work. And create a fiddle – giorgio Commented Dec 7, 2017 at 8:23
• @giorgio, I updated my post – HamedFathi Commented Dec 7, 2017 at 8:49
• Just a question - why do you need to use a js plugin to achieve that layout - very simple to do in html / css - especially with flex in use. – gavgrif Commented Dec 7, 2017 at 8:54
• @gavgrif, I want to be collapsible and resizable Do you have a better option? – HamedFathi Commented Dec 7, 2017 at 8:59
• @user7489391 - I just posted a quick and dirty layout that replicates yours - you don't need an external js thing to do this - its straight HTML / CSS and can bopne in a flash (and responsive) using bootstrap or flex. – gavgrif Commented Dec 7, 2017 at 9:08

1 Answer 1

You where pretty close. First of all you didn't add content class to the left/right pain, so they didn't show. Then you mixed up the horizontal split. Here's a working fiddle.

<div id="a" class="split content"></div>
<div id="b" class="split">
    <div id="d" class="split content split-horizontal"></div>
    <div id="e" class="split content split-horizontal"></div>
    <div id="f" class="split content split-horizontal"></div>
</div>
<div id="c" class="split content"></div>

Split(['#a', '#b', '#c'], {
    gutterSize: 20,
    cursor: 'pointer',
    direction: 'vertical',
});
Split(['#d', '#e', '#f'], {
    sizes: [15, 70, 15],
    gutterSize: 20,
    cursor: 'row-resize',
});