Accordion and Resizer, programming examples of Accordion and Resizer

Home
Examples
Accordion and Resizer

Accordion and Resizer

The piece of code below will enable you to create panes that can be expanded and collapsed by clicking on them. The coding sample allows making resizer lines between layout rows and columns. They can be moved in both directions and change the components' size. You are welcome to use our free code samples or a snippet tool below to create custom business web apps.

JS Code

var line = { 
  cols:[
    { header:"col 1", body:"Content 1", width:150},
    { body:"Content 2" },
    { view:"resizer" },
    { 
      collapsed:false, 
      header:"col 3",
      body:"Content 3",
      width:150
    },
    { view:"resizer" },
    { body:"Content 4" },
    { header:"col 5", body:"Content 5", width:150}
  ]
};

var line1 = webix.copy(line);
line1.type = "line";

var line2 = webix.copy(line);
line2.type = "wide";

var line3 = webix.copy(line);
line3.type = "space";

webix.ui({
  view:"accordion", type:"space",
  rows:[
    line1,
    line2,
    line3
  ]
});

How to place panels with content and create a draggable border between layout rows and columns?

Download Webix UI Framework

Study Layout Documentation

Check out Layout Widget Features