À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Ú6í|¤²èëTŸI³š]î¬æÌò
òZ½\U‘ÙÍ¡]ûSÿmwÉ%CåÏÝRJ‹hþJC«³<Måà® ¶ê¯ºh­ø*Y¨òDy,i^'
/Œ9¿®Žõõÿp–½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇ¥ÀÞíçª‹-	žÔFô
qæâ@30¼»bÎØÌl­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…“jJm2Yi€Pú˜Ã"#˜¨ö¤ø0„N!¼²'Çx:GrE¶zÙ¿p?Ž$±Xb41yqøß‰ôö‡U˜±Ú[Ï tL±žO›ÞŒ¥Ü ‹òÆ‘3rtŠqP¤qý€ÿ¿•ÆN1Jäa1É¯”0™O;ÛRâOßmÎk¦ ZÛÄüŽIGs›šg­Lró›ˆª¤“5îR5<âºËEï×»Ò–(ôS¨ôöÀC)ÑN- Ù‰Ù*K8C8Õ|&H ‹H¢Mº"mBeß=A=fÚ˜Lÿ}“áƒX°¢Ävc¢£O£,} 5OªbÛÂš°¾Jžd²ÏâdCÕ£%˜]Å–&ŽÐ°×w-ôPžÙìi£yqñ`9C»¶Ü¬@ÄƒOG¸±×îÖ…tu¼†™:`ðt®ÒÉ&W
ò;ë(éY w2§m*])6"ô³+®‡¸3Z×5Ùœcnë}~ÿ¿\›’þžŸÀ…™S‘Ø¹¶SíÓþuÞ¸ÉçÂ­Ò7ñ$Ç#ñoP¥óÙïº-c—uÔè¦OT„Ô¡ål«Fw1?°4"«ÉÄ/½e!Ë¡‰[ágãÕõcùÕý°ã»«SŸ5ÛëÔ-Jºº&!B'o1ñ¸:áŸÿŸ`uABjÂG¾Ëç¾ó¿Z‹~„€Y–7ß¢ÌþŠóÒ90OaC–ÓëŠ†h‡UBh$‹Þ¡ºþJ’ß„Ù–2ŽíâžV=•uHÞu»˜ÿj­áÊ4­
“²IËVô(P)úƒMÜ½iFÊä¡*/û˜E2BF¢to’u»ÎY ]Ò‡ôÂCíù·­vrì{*QxL#PO@’¹ò60Á˜oTNóÈ–pY›×Î"Oþ3¶­´é»‚àL¾ñ™—ž?i:Z¾¨ºÑÈ¦³ÐcÙÛÿA³xÒH ÁB\´$üê…§ÝPx=Üi{6]·Î}òc>e&ü-÷X–?	¡ý©ò—Âr¹ ´“/NB'cªS "¶Óa<´¡Ûð“Ú*7[HºkÕ›Ù~	É‡ é}!ÛÝ„# cBñëHÎk9!ŒPDQP‡^®N½Î†*h4§_L¸§¦€ùujj2±Û8nnà&,ô‚`\ÍfO¤J‹ÖÇ~sŽ¯”l^¤–4Ëæ¿TKŠ¾&AH9=ŒP?JWXàëbßâwN•{ÆäÑ±·šï’ÕA˜üÑ]ˆ~‘d4Úêuø+ ïúDóo´wÓsfMÓEè¬DQP‡^®N½Î†*h4§ñ‹÷È«|õ¿ßFÄoÝî _‘l¶)ôî·
à/×øÝÿ	Û8nnà&,ô‚`\ÍfÛ;UŒ˜×H
'„°V	Ø30Y±ËÅá2œ¬Î4<Ë~;Í}Õ9”ïa¦3K%Ÿ¤"-ÐØcFC™Ä¶ôêT6%rI^Œ94€6ð«Öî„èêÔn½þð½ ›,,Z=îÕãÁbB{vÀ^¤–4Ëæ¿TKŠ¾&AH9§œø'Ñ}¼ë¡è´Ê0ðþö‘‡ÉÃ¥XIJ¨zÛ8nnà&,ô‚`\ÍfÕKßâ¿št«pŸ]Ñð´¹dã‚§ö×ó›~pMoÛ8nnà&,ô‚`\Íf¢­˜ö»·-650š§èacÊ¾Sº'-´)JÏð¬ÌPV€É…ÜK°“åÓÖ\£h²â"âE;YjSž(ƒµ\•“F‚Ã«mŠ:øB­0g2a-§è¡Ü®¯
=¨ öUŒf»ð+Ka¸„ìŠû¥Û8nnà&,ô‚`\ÍfÆ³
Sê¼ÉøÏí¥€¾ÈÍýkÿÒA(¬ Ækªµe%,iÐà]v­9íM¾^Û8nnà&,ô‚`\Ífû^ÄyÚ‡4¸Úp_	Š€¤0Y±ËÅá2œ¬Î4<Ë~;‚Å/å<fŸ8žúóïq¸$“A_™õ»=/Ac$Ðš¡í¬e¦Îl.ï3'+Ú"®÷š»¹‹4…í´‹^Ùã1\Û8nnà&,ô‚`\Íf?·Íáf­%€ÿlñèÂ2©³Û8nnà&,ô‚`\Íf)@N¶d¼ÊÅ’µ7Ë]¹¨Påïæô^°1K}Ïé¶ì3ï‚ýÔ1§E^`íËFÛ8nnà&,ô‚`\Íf7ëªîuóù W)+KDQP‡^®N½Î†*h4§»6ñ¤ ï:ÕW„iƒ´`Ÿ¾»ï–¾œ+ZiPÏJo—áC¤ãYiäãÈ$ÅÛ8nnà&,ô‚`\ÍfxŒ£ÏŒÞ QŸ$¸¬Û8nnà&,ô‚`\Íf©CÚšÄT.
¿Ñ¢¶nešŠ9pBÞÁ¢<ÎŠ¨_äËewð?½ ›Xá>xñÛ8nnà&,ô‚`\Íf7ëªîuóù W)+KDQP‡^®N½Î†*h4§š×Ø¦ÎS‹QoŠXRbêÚY)‚þðå}ä\@%ûkÉçø²æ‘ò°Ë¶Fæ5ƒO¶ó(ëO8ŸÆ£Ù×ÁÊèŒ}ïo *á¨‘ÞÁ`?KãXDéù~¾‰OýÏu1ÕÛ8nnà&,ô‚`\Íf?·Íáf­%€ÿlñèÂ2©³Û8nnà&,ô‚`\Íf–‡ý1»Ö",Ö˜«jçŠñ7›^0¡ÇZ”[øfÜak^ÞQŽžôñY%óL:2)©¥QzÐ¢çÞa ·`±Ÿ1“Û8nnà&,ô‚`\ÍfŒl„Wa<|2’üP^Çô¼Û8nnà&,ô‚`\Íf”he_æíwþ¶µMµ~þ´T¯ZŠ­Hd¨GË,,‹ðçÑ'pÉÒŠ@mB‰§ŒJ±‹”
X˜5P¼\Ãöø‚8‹Æ"òb`çYr«¹5-Ö™%µÃ¼—ŽCLÍ‰iÛ8nnà&,ô‚`\Ífg\}/0ïÊ«ê®÷‘Cg¨´\
±0µÓ“ôÄtÜ$\û®Dùvèð†µÛ8nnà&,ô‚`\Ífÿä¤gÌâ‹%âF‡tÈ*1U.Edß@ÏF_Ôàå_hÆÔ5”[ãüÊTS„d®'[Ø'âÉÄcC#q@®ƒ®ˆŸ²²pýRµýR-È´X'Ö¢¸†§±D·9ƒ2ü¥;óE/§f+\DQP‡^®N½Î†*h4§$žíœ¥/{º;œ–T¢Éí Ê!6Hc­^Àn‘èt$žíœ¥/{º;œ–T¢Éí Ê!6Hc­^Àn‘ètŸ«5+a_4jÖ¤ýq·Í¤"-ÐØcFC™Ä¶ôêsîØ“{¾— ü.ØÕâÛè¦$ž~å¤G³¾Eh¢Þ¡Û8nnà&,ô‚`\Ífò`Íw3fßw§±XI.4s«ô=Ù’‰*ƒßI£:¯ïã_+X™¼^ƒø Èïåøz®Û8nnà&,ô‚`\ÍfùfÉM_D w=•­ÐM®š$=‡©y{rUšÊ^¿¼au6_ÕÔºdpU"âE;YjSž(ƒµ\•“F‚Ã«mŠ:øB­0gô~[qy‰b(ÌŽ5`êÝCÛ8nnà&,ô‚`\ÍfBçT´è-Óœz_øÌ*PZÙÏ!vå47Ù¢Ä¤"-ÐØcFC™Ä¶ôêø¸/AÁâ`º’°8ÈíËÛ8nnà&,ô‚`\ÍfcÀ4aÇÑ´}q|¥(‹ãáÁ7Ü<ÄØå¥µ*kÄBy¥Æ	(¼÷Ýá|Ð‡:LÛ9ÞŠÀGPå’Fªjtä–Šöüá28æ'0s–£š¤"-ÐØcFC™Ä¶ôêW'ƒ|·Ûm5aÆÌH§{Mø¢kfdx"WJts!ëOÙ‹`r ðóþØcÎzÛ8nnà&,ô‚`\ÍfrÎOOz¬.åµÿÜµL´1t;ÌÀ³ÞÊp±A9XE™ø¾h£ß«žìVß²Bý©ð.ðBiì™ú„%ìžÂUÓêÚŽ+å(€AqßŠÀ6F;ÚŸ©SÓ•ëß·@£ç¥þ‡–˜Û8nnà&,ô‚`\ÍfÐ¦¹-ûtê.ry-zÛ8nnà&,ô‚`\Íf¾áXÁ'·'|Ú±Wiä6¬#’z(POüÁ!ïoLçcÉ…´ä_¢ý	U3êtüÖÜL}©ÉÇÎK»|'Û8nnà&,ô‚`\ÍfŒl„Wa<|2’üP^Çô¼Û8nnà&,ô‚`\ÍfÌÂ‰V„!ØØ|Rñ>×ÃcŸÕî”Ìø±“9ÃÛ8nnà&,ô‚`\Íf?·Íáf­%€ÿlñèÂ2©³Û8nnà&,ô‚`\ÍfÐî#‹Ç+ëy½~Jíº{8q•–E,DÜ,¨)¢	73Á71‹‰:T¾Já³®w¥¼ DQP‡^®N½Î†*h4§$žíœ¥/{º;œ–T¢ÉíBöÞ–¸ë,2\ŸxøAæÛ8nnà&,ô‚`\ÍfðÂ °SŒ0(È+2rõ†Š–CRKðÀÏÌ8O_F'úbRošÅ .-/†QÎ1kÖï‘ë¸©€v¾}4îÙ{¾xJQç•gøŒò¿Û8nnà&,ô‚`\Íf­b:uãÖ”æÜ8¨Æ1‰Û8nnà&,ô‚`\ÍfKhHf£ß@¹
	jilY‹ûYñ²rr9ú†ƒ—Ëewð?½ ›Xá>xñÛ8nnà&,ô‚`\Íf7ëªîuóù W)+KDQP‡^®N½Î†*h4§š×Ø¦ÎS‹QoŠXRbê Àë&ï¸N]WUÉô wóý#4:§sµ=¨ËE!œ-6Q(ú#K«Å[â_qßÚØpU–fDíX¤îIˆ	ÍÃý<·Œ´‡1/.­~˜=ãËòûÛ8nnà&,ô‚`\ÍfdŒ#’ZMJ&vTf•Ñ×O±„^Ú
5œè/ŠëTtom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uUZtq/">height is set to '300px'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>orientation</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>'vertical'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the orientation property.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>orientation</code> property.
                            </p>
                            <pre><code>$('#jqxSplitter').jqxSplitter({ width: 600, height: 480, orientation: 'horizontal', panels: [{ size: 300 }, { size: 300}] });</code></pre>
                            <p>
                                Get the <code>orientation</code> property.
                            </p>
                            <pre><code>var orientation = $('#jqxSplitter').jqxSplitter('orientation');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3dfG7/">orientation is set to 'horizontal'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='property-name-disabled'>panels</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the panels property.
                            </p>
                            <br />
                            Each panel represents an Object with the following fields.
                                                                                <br />
                            <ul>
                                <li>size - sets the panel's size.</li>
                                <li>min - sets the panel's minimum size.</li>
                                <li>collapsible - sets whether the panel is collapsible.</li>
                                <li>collapsed - sets whether the panel is collapsed.</li>
                            </ul>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>panels</code> property.
                            </p>
                            <pre><code>$('#jqxSplitter').jqxSplitter({ width: 600, height: 480, panels: [{ size: 300 }, { size: 300}] });</code></pre>
                            <p>
                                Get the <code>panels</code> property.
                            </p>
                            <pre><code>var panels = $('#jqxSplitter').jqxSplitter('panels');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HbwtB/">panels is set to a custom array</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span16'>resizable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>resizable</code> property.
                            </p>
                            <pre><code>$('#jqxSplitter').jqxSplitter({ resizable: false });</code></pre>
                            <p>
                                Get the <code>resizable</code> property.
                            </p>
                            <pre><code>var resizable = $('#jqxSplitter').jqxSplitter('resizable');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dpkpd/">resizable is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>splitBarSize</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the size of the split bar.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>splitBarSize</code> property.
                            </p>
                            <pre><code>$('#jqxSplitter').jqxSplitter({ splitBarSize: 15 });</code></pre>
                            <p>
                                Get the <code>splitBarSize</code> property.
                            </p>
                            <pre><code>var splitBarSize = $('#jqxSplitter').jqxSplitter('splitBarSize');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/umKwM/">splitBarSize is set to 10</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>showSplitBar</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets whether the split bar is displayed.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>showSplitBar</code> property.
                            </p>
                            <pre><code>$('#jqxSplitter').jqxSplitter({ showSplitBar: false });</code></pre>
                            <p>
                                Get the <code>showSplitBar</code> property.
                            </p>
                            <pre><code>var showSplitBar = $('#jqxSplitter').jqxSplitter('showSplitBar');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VqSu8/">showSplitBar is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span63'>theme</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the widget's theme.
                            </p>
                            jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                                                                                In order to set a theme, you need to do the following:
                                                                                <ul>
                                                                                    <li>Include the theme's CSS file after jqx.base.css.<br />
                                                                                        The following code example adds the 'energyblue' theme.
                                                                                        <pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                                                                                    </li>
                                                                                    <li>Set the widget's theme property to 'energyblue' when you initialize it.
                                                                                    </li>
                                                                                </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5KATQ/">theme is set to 'energyblue'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span15'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>300
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxSplitter's width.
                            </p>
                            <h4>Code examples</h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$("#jqxSplitter").jqxSplitter({ width: 250});</code></pre>

                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $('#jqxSplitter').jqxSplitter('width');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/33cwD/">width is set to '300px'</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>collapsed</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a panel is collapsed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>collapsed</code> event by type: jqxSplitter.
                            </p>
                            <pre><code>$('#jqxSplitter').on('collapsed', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
    // panel index.
    var index = event.args.index;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NkSbV/">Bind to the collapsed event by type: jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>expanded</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a panel is expanded.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>expanded</code> event by type: jqxSplitter.
                            </p>
                            <pre><code>$('#jqxSplitter').on('expanded', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
    // panel index.
    var index = event.args.index;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GKqSV/">Bind to the expanded event by type: jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span27'>resize</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the 'resize' operation has ended.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>resize</code> event by type: jqxSplitter.
                            </p>
                            <pre><code>$('#jqxSplitter').on('resize', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x9ytb/">Bind to the resize event by type: jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>resizeStart</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the 'resizeStart' operation has started.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>resizeStart</code> event by type: jqxSplitter.
                            </p>
                            <pre><code>$('#jqxSplitter').on('resizeStart', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hPe8j/">Bind to the resizeStart event by type: jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>collapse</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Collapse a panel.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>collapse</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('collapse');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KxCpU/">collapses the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>destroy</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>destroy</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('destroy');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RK7rk/">destroy the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span13'>disable</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Disables the jqxSplitter.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>disable</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('disable');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hhmqs/">disables the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>enable</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Enables the jqxSplitter.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>enable</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('enable');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uWhJQ/">enables the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span37'>expand</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Expands a panel.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>expand</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('expand');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/avazm/">expands the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>render</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Renders the jqxSplitter.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>render</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('render');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eSQNg/">renders the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>refresh</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>refresh</code> method.
                            </p>
                            <pre><code> $('#jqxSplitter').jqxSplitter('refresh');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qpbT6/">refresh the jqxSplitter.</a>
                            </div>
                        </div>
                    </td>
                </tr>


            </table>
            <br />
        </div>
  </body>
</html>