Collapsing a Table header is breaking my table format

See more:

Javascript

jQuery

HTML5

Hi,

I am trying to use a datatable that has a header, sub header and 3 rows.

There are 4 sub headers named Event 1..4
Next to each sub header are 3 rows of data

When I click on the sub header, the sub header is collapsing, but the rows from sub header 2 are leaking over

You can see it happening in Fiddler below, Click on the Event1 , then Event2 and you will see the format of the DataTable break.

I would like to see each event collapse into Event with the 3 rows showing scores.

How can i collapse the sub headers and keep the formatting correct.

Thank you


Fiddler project below

http://jsfiddle.net/nc8bt9ss/873/