accordion with checkbox on the header

I want an accordion with checkbox on the header. But, I’m not sure how can I achieve it.

If i’m not mistaken it is not possible not add a [webix] checkbox to the header.
You could try to insert some html elements ( ) in header and play with css.

Webix components cannot be embedded in the accordion header.

Additional elements can be added only through the html template. Also, it is possible to add some specific click handler to the element’s class, something like

okay. Thank you Yuppy and Listopad. :slight_smile:

In the snippet you have shared, I cannot check the checkbox in the header.
The click on the checkbox opens or closes the body of the accordion.

The point here is that any click on a header will close/expand it.

To avoid this, you need to return false from theonClick handler of the particular element (its class, to be precise), as shown in the above sample.

Thank you :slight_smile:

On check of the checkbox, the change is not persisted after the accordion is collapsed or expanded.

How can I achieve this?

Can this be achieved?
Any help would be appreciated.

As the header is re-rendered on collapse/expand, you need to store the checkbox state and apply it with the corresponding event handler. Please check:

I used below code but still i am unable to save the checkbox state when expand and collapse accordion item. Please help

    var dynamicHeader = "<input type='checkbox' class='header-chkbx' id='includeFlg' checkValue:'On', uncheckValue:'Off'  name='Include' /><label for='includeFlg'> Include </label>";
                    let id= 'accordionitemid';
                        // global layout events
                        onClick: {
                            onAfterExpand: function (id) {
                                if (id == "accordionitemid") {
                                    $$(id).$view.querySelector(".header-chkbx").checked = isChecked
                            onAfterCollapse: function (id) {
                                if (id == "accordionitemid") {
                                    $$(id).$view.querySelector(".header-chkbx").checked = isChecked


                    var config = {

                        rows: [{
                            view: "accordionitem",
                            id: 'accordionitemid',

                            header: 'Registration' + dynamicHeader,

                            onClick: {

                                "header-chkbx": function (event, accordionId, elem) {

                                    isChecked = elem.checked
                                        webix.message("checkbox clicked");
                                    return false;

                            body: registrationUI,


                    var view = webix.ui(config);

Hello @sruthi_keerthi ,
Please, follow the next discussion: