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

Drop down to view markup

<div id="splitter">
   <div>Panel1</div>
   <div>Panel2</div>    
</div>

You can initialize the widget with the following jQuery script.

Drop down to view script

<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 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