webix slidetoggle

Webix JS
1

Hi Experts,

I am using “webix accordion” but i want to use action like jquery “slidetoggle()”. Is it possible???

Please Help me on this?

Here is my sample code for Webix Accordian:-

webix.ui({
css: “leftPan”,
container: “panelLeft”,
view: “accordion”,
id: “leftPan”,
rows: [{
id: “shortcuts”,
header: “Shortcuts”,
height: 130,
body: treedata,
},{
id: “folders”,
header: “folders”,
height: 130,
body: treedata,
}]
});

2

Check

http://forum.webix.com/discussion/3895/how-to-add-smooth-transition-effect-for-accordion/p1

3

Thank you Maksim…Great Help…
one more thing, How can we set the auto height for accordion body/content.
Here is my sample code:-

webix.ui({
   css:"smooth", cols: [{
          header: "col 1",
          width: 260,
          body: {
          type: "line",
          view: "accordion",
          rows: [{
          header: "SHORTCUTS",
          body: {
             id: "ShortCutTree",
	     template:"ShortCutTree Content"
              }

             }, {
             header: "FOLDERS",
             body: {
               id: "FolderTree",
               template:"FolderTree Content"
                   }

             }]
          }
   }]
});

Please help me on this…please

4

Please check

http://webix.com/snippet/3f124694

Adding autoheight property to accordion cells will force autoheight behavior

                header: "SHORTCUTS",
            	body: {
                 id: "ShortCutTree",
                 template:"ShortCutTree Content",
                 autoheight:true
                }
5

Thanks you maksim…great job. I have layout which is having three panels those are “Left Panel”,“Mid Panel”,“Right Panel” Is it possible to get the auto scroll in two cases: 1) When height is increased on the accordion content.
2) When Folder name is larger than the left panel

Here is my sample code:-

webix.ui({
   css:"smooth", cols: [{
        header: "col 1", 
          width: 260,
          body: {
            type: "line", 
            view: "accordion",
			css:"smooth1",
            rows: [{
            	header: "SHORTCUTS",
            	body: {
                 id: "ShortCutTree",
                 template: dynamically added(Folder Tree)
                }
            }, {
               header: "FOLDERS",
               body: { 
                 id: "FolderTree",
                 template: dynamically added (Folder Tree)
               }
   
             }]
          }
   }, {}]
});

<style>
.smooth .webix_accordionitem {
   transition: width 0.5s;
}
  .smooth1 .webix_accordionitem {
    transition: height 0.5s;
}
.smooth > .webix_view > .webix_accordionitem_header{
  z-index:4;
}
</style>
6

Hi Maksim,

Actually i need a scroll bar in accordion is it possible???. For example:-
view:“scrollview”, id:“verses”, scroll:“y”,

Please help me on this…Thank you

7

You can include the scrollview in the top level accordion, and place the nested accordion in the scrollview

http://webix.com/snippet/cb9ce0f9

The only issue is that scroll always visible. You can enable custom scrolls to fix it.

http://webix.com/snippet/716bb5b6

8

Thank you it works…Great help. But i am implementing the folder tree into accordion, So now i want horizontal scroll when folder name is increase.
Here is my sample code:-

webix.ui({
type: “clean”,
padding: 0,
responsive: true,
rows: [{
padding: 0,
borderless: true,
template: “Test”,
height: 30
}, {
id: “message-view”,
hidden: true,
height: 40,
template: ‘’
}, {
borderless: true,
template: ‘

’,
height: 55
}, {
type: “clean”,
view: “accordion”,
multi: true,
css: “smooth_hor”,
cols: [{
width: 0.1,
css: ‘toggleAccordionHeader’,
header: “FILTERS”,
id: “filterPanelHolder”,
body: {
template: ‘
’
}
}, {
header: “FOLDERS”,
id: “foldersPanel”,
css: ‘toggleAccordionHeader’,
on: {
“onItemClick”: function() {
HeliumPlus.mainLayout.Controller.resetLayout();
}
},
width: setLeftPanWid,
body: {
css: “smooth”,
type: “line”,
view: “accordion”,
rows: [{
header: “SHORTCUTS”,
height: 110,
body: {
template: ‘
’
}

                                        }, {
                                            header: 'firstaccordionheader',
                                            css: "treeFolder",
                                            body: {
                                                template: '<div id="FolderTree"></div>'
                                            }

                                        }]
                                    },
                                }
                    });

Please help me on this…

9

Hi,

Could you please use http://webix.com/snippet/ tool to create a working demo ?

10

Hi Maria,

Thanks for your quick reply, here is my demo link
http://webix.com/snippet/716bb5b6 (It is showing vertical scroll bar)
like wise i need to show the “horizontal scroll bar”, when content is exceeds.

Please Help me on this…Thank you.

11

Hi,

you demo does not require horizontal scroll. So, the issue is still not clear. However, “scroll” property of scrollable views can be “x” as well as “y”.

Try to set scroll: “x” for the view that should have horizontal scroll.

12

Hi,

I am implementing the folder tree on Accordion, My question is how to apply horizontal scroll when folder tree name is increased.

Please Help me on this… Thank you.

13

please find the below example . I need horizontal scroll when folder tree name is increased

http://webix.com/snippet/a7451a93

14

It was expected that scroll:"x" will enable desired behavior, but it doesn’t work. Fix will be available in next few days.

15

Really Thank you for your quick response…maksim

16

Hi Makism,

I am waiting for you reply…please help me…Thank you

17

Fix will be available as part of next minor build ( probably in next two days )

If you have a support subscription and need the fix ASAP - please contact us at support@webix.com