jQuery Horizontal Splitter

This is the top part of the horizontal splitter.

Using CSS styles you can control the look of the splitter, such as its color, width, and appearance when selected. For example, the top pane on this example uses stylesheet rules to limit the height between 50 and 200 pixels.

This is the bottom part of the horizontal splitter.

This plugin was designed to use simple markup and require almost no work to get a basic layout. The simplest HTML markup for a horizontal splitter looks like this:

 <div id="MySplitter">
   <div> Top content goes here </div>
   <div> Bottom content goes here </div>
 </div> 

To create the splitter, put a line of code in a .ready() handler to select the MySplitter div in a jQuery object and pass it to the splitter plugin:

 $("#MySplitter").splitter({type: 'h'});

Congratulations, you have a splitter in your document!