JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<button id="bottom" class="k-button">Bottom</button>
<button id="right" class="k-button">Right</button>
<button id="hide-show" class="k-button">Hide/Show</button>
<br />
<br />
<div id="splitter-surrogate" style="display:none;">
        <div class="header_pane">
            <p>Invoice Header + Distributions pane</p>
        </div>
        <div class="pdf_pane">
            <embed type="application/pdf" src="http://pdfdevjunkie.host.adobe.com/pdf/acrobat_reader_security_9x_Fast.pdf" width="100%" height="98%">
</embed>
        </div>
</div>
<div id="invoice-block"></div>

CSS

.pdf_pane object{
    display: block;
    border: solid 1px #666;
}

JavaScript

var $splitterSurrogate = $("#splitter-surrogate");
var $splitter;

var setOrientation = function(orient) {    
    var $invoiceBlock = $("#invoice-block");
    $invoiceBlock.empty();
    $("<div id='splitter' style='height: 800px' />").appendTo($invoiceBlock);
    
    var markup = $splitterSurrogate.html();
    $splitter = $("#splitter");
    $splitter.html(markup);
    $splitter.kendoSplitter({
        orientation: orient,
        panes: [
            { collapsible: true},
            { collapsible: true}
        ]
    });
};

$("#bottom").click(function() {
    setOrientation("vertical");
});

$("#right").click(function() {
    setOrientation("horizontal");
});

$("#hide-show").click(function() {
    var splitter = $splitter.data("kendoSplitter");
    var pane = $splitter.find(".pdf_pane");
    splitter.toggle(pane);
});

setOrientation("vertical");