Accordion Header

Webix JS
1

Is there a way to reduced the accordion header to a single line with the header text at one end?

2

Yep, you can reduce the header height using headerHeight/headerAltHeight properties and modify the CSS accordingly:

http://webix.com/snippet/789302d0

3

thanks, I’ve also found I draw an html line in the header then change the background color to be the same as the rest of the background. Decided to leave headers as is for the moment.
I am trying to use the Accordion with keys only (no mouse) is there a way I can have a header selected and if I cursor down or up the next or previous header be selected. Pressing enter on header would expand the item (found way to do this although it only works the first time. ) I can get the index of the current accorionitem etc but unable to find any useful way to use the information I get. using your blog example as basis’s for my extermination.

4

Here’s a very raw example of keys navigation. Dependency between IDs and indices is defined by hand:

http://webix.com/snippet/8a7ab13a

By default, Webix supports tab navigation to move focus through the views. Enter on the header (particularly, the arrow icon is focused) works as a click and then moves the focus to the next view (accordionitem’s body). To track/change the focus, you can use onFocusChange and keyboard events and methods.

5

thank you again. I was unable to get my weekend fix of webix this week. I’ll try and understand you solution and build it into what I already have.
Thanks again for your assistance.