JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js/apiviewer.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="splitter">
        <div>最初のパネル</div>
        <div>2 つ目のパネル</div>
    </div>

    <div class="api-explorer">
        <fieldset>
            <legend>スプリッターの API 設定</legend>
            <input type="button" id="igButtonSplitterFirstPanelCollapse" value="最初のパネルの縮小" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterFirstPanelExpand" value="最初のパネルの展開" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterSecondPanelCollapse" value="2 つ目のパネルの縮小" style="margin-bottom: 20px;"></input>
            <input type="button" id="igButtonSplitterSecondPanelExpand" value="2 つ目のパネルの展開" style="margin-bottom: 20px;"></input>
            
            <br />
            コンテンツを設定: <input type="text" id="firstPanelText"></input> 位置: <input type="button" id="igButtonSplitterFirstPanel" value="最初のパネル" style="margin-bottom: 20px;"></input>
            <br />
            コンテンツを設定: <input type="text" id="secondPanelText"></input> 位置: <input type="button" id="igButtonSplitterSecondPanel" value="2 つ目のパネル"...

JavaScript

$(function () {
            // Used to show output in the API Viewer at runtime, 
            // defined in external script 'apiviewer.js'    
            var apiViewer = new $.ig.apiViewer();

            /*----------------- Method & Option Examples -------------------------*/

            // process events of buttons
            $('#igButtonSplitterFirstPanelCollapse').on({
                click: function () {
                    $("#splitter").igSplitter("collapseAt", 0);
                }
            });

            $('#igButtonSplitterSecondPanelCollapse').on({
                click: function () {
                    $("#splitter").igSplitter("collapseAt", 1);
                }
            });

            $('#igButtonSplitterFirstPanelExpand').on({
                click: function () {
                    $("#splitter").igSplitter("expandAt", 0);
                }
            });

            $('#igButtonSplitterSecondPanelExpand').on({
                click: function () {
                    $("#splitter").igSplitter("expandAt", 1);
                }
            });

            $('#igButtonSplitBarButtons').on({
                click: function () {
                    $("#splitter").igSplitter("splitBar").children("div").remove();
                }
            });

            $('#igButtonSplitterFirstPanel').on({
                click: function () {
                    $("#splitter").igSplitter("firstPanel").text($("#firstPanelText").val());
                }
            });

            $('#igButtonSplitterSecondPanel').on({
                click: function () {
                    $("#splitter").igSplitter("secondPanel").text($("#secondPanelText").val());
                }
            });

            $('#igButtonSplitterFirstPanelSize').on({
                click: function () {
                    $("#splitter").igSplitter("setFirstPanelSize", $("#firstPanelSize").val());
                }
            });

           ...