Bootstrap Vertical Checkbox Groups Collapse

I would like to have several checkboxes, some of which, upon clicking, will display an additional set of checkboxes.

This is a working example: http://ift.tt/1KTXUc0

I had to apply a lot of "fixes" in order to get it working the way I want and I was wondering if there is a cleaner way to execute the same functionality.

1) If I remove the "margin:0;" code then the collapsed groups take up vertical space.

2) If I remove the column classes "col-xs-12" from the checkbox divs then for some reason the checkboxes in the "sub-level" group don't work.

3) And if I remove all "col-*" classes then the collapsing animation is choppy.

I don't understand why these things are the way they are. Why, for example, don't the checkboxes work unless I add a column class to all checkbox divs: http://ift.tt/1M3rzBF (checkboxes under "OD2" are inactive). Are all of the classes that I added necessary? Did I do it correctly? I would appreciate any suggestions for improving this code.

Thank you