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