We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
We can achieve this requirement using the methods “collapse” and “expand” of Splitter control. We can call this methods in any events (for example button click event) in order to expand / collapse the pane of splitter by passing the index value of the required pane. Please find the below code blocks to achieve the requirement. HTML <!--latest CDN for theme file--> <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" type="text/css" /> <!--CDN for JQuery script file--> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <!--latest cdn for script file--> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> HTML <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area splitter-width"> <!----------------Splitter Control----------------> <div id="outterSpliter"> <div id="innerSpliter"> <div> Expand Pane 3 <br/> <button id="expand_button" type="button">Expand</button> <br /> <br /> Collapse Pane 3 <br /> <button id="collapse_button" type="button">Collapse</button> </div> <div> <div class="cont">Pane 2 </div> </div> </div> <div> <div class="cont">Pane 3 </div> </div> </div> <!-------------------------------------------------> </div> </div> </div> Javascript
$(function () {
$("#outterSpliter").ejSplitter({
height: 250,
width:"100%",
orientation: ej.Orientation.Vertical,
properties: [{}, { paneSize: 80 }],
enableAutoResize:true,
});
$("#innerSpliter").ejSplitter({enableAutoResize:true});
SplitterObj = $("#outterSpliter").data("ejSplitter");
});
$("#collapse_button").bind("click", function () {
//To collapse the split pane use below mentioned code, here we should specify
//the split pane index number
SplitterObj.collapse(1);
});
$("#expand_button").bind("click", function () {
SplitterObj.expand(1);
});
Refer to the sample: https://jsplayground.syncfusion.com/awbh5c2g After running this sample, if you click the expand and collapse button, it will perform expand and collapse actions for Pane 3. Result
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
