Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Splitter > Markup and Scripting

The HTML markup for a simple, unnested wijsplitter widget with two panels looks like this.

Markup
Copy Code
<div id="splitter">
   <div>Panel1</div>
   <div>Panel2</div>    
</div>

You can initialize the widget with the following jQuery script.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    $("#splitter").wijsplitter({ orientation: "horizontal" });
    });
</script>

You can also add CSS styling to the splitter in the head section of the page. In this example, we specify the width and height of the splitter

Drop down to view style

Style
Copy Code
<style type="text/css">
        #splitter
        {
            height: 200px;
            width: 200px;
        }
</style>

The markup and script featured here results in the following live widget. Note that we set the orientation property to "horizontal" so that we have two panels arranged one on top of the other. Click the expander button to open Panel2 fully, or click and drag the splitter bar up or down to resize the panels.

See Also

Reference