Responsive Expand / Collapse only when icon is clicked (exclude other content in cell)

enigmaclough

I understand that the solution to this is to have the expand / collapse icon in it's own column, however, for the app I am working on I would like the icon to be in the first column along with the cell content, which in this case is a checkbox.

https://snag.gy/mYgpBH.jpg

With the expand / collapse icon in the first column when the checkbox is checked / unchecked it triggers the expand / collapse of the DataTables row. Is there a way to only trigger the expand / collapse by the icon only (ie excluding all other cell content)?

mika312

BUMP

gkratz

Up, same question for me

athan_oikonomou

There seems to be a good solution here https://stackoverflow.com/questions/38585049/expandable-and-collapsible-feature-is-working-when-clicking-the-checkbox.

The first answer that has 6 votes, uses this part

$('td').on('click mousedown mouseup', function(e) {
    if (e.target.type === 'checkbox') {
        e.stopPropagation();
    }
});

to prevent the checkbox to interact with the pseudo-element, alternatively it creates a new html element as expand/collapse button. I hope this helps you.