Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
How to close the splitter tab?
posted

Hello.

I created the splitter in the following way:

$("#mySplitter").igSplitter({
height: "400px", orientation: "horizontal",
panels: [{ size:0, collapsed: true }, { size: 400, collapsible: false }]  // hide the top panel and show the bottom one
});

As you can see I hidden the top panel. 

Now I would like to add to the second panel a button which will open the top panel and collapse the bottom panel. Is it a way of doing this?

I 'm trying to call igSplitter with the same parameters but in the opposite order:

$("#mySplitter").igSplitter({
height: "400px", orientation: "horizontal",
panels: [{ size:400, collapsible: false }, { size: 0,  collapsed: true}]   // hide the bottom panel and show the top one
});

But it doesn't work.

Can someone help me please?

Thank you!

Parents
No Data
Reply
  • 8421
    posted

    Hello Dmitry,

    The approach that you are currently using would recreate the splitter rather than collapse and expand items. A better approach would be to set collapsible to true on both of the panels and then use the expandAt and collapseAt methods.

    I made a sample that demonstrates this approach. In the sample when you click on a row in the grid it will collapse the top panel and expand the second one, showing the details grid. When you select a row in the details grid it will expand the top panel and collapse the bottom one showing the master grid.

    Please let me know if you have any questions or concerns about this implementation.

Children
No Data