Как создать сворачиваемый заголовок в группировки данных?

Question

Предположим, у меня есть список городов с такой структурой (для каждого города):

{
   "country": "england",
   "city": "london"
},
{
   "country": "england",
   "city": "watford"
},
{
   "country": "usa", 
   "city": "new york"
}
{
   "country": "usa", 
   "city": "florida"
}

HTML-таблица содержит следующую структуру:

<table id="cities">
<thead>
    <tr>
        <th>Country</th>
        <th>City</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>england</td>
        <td>london</td>
    </tr>
    <tr>
        <td>england</td>
        <td>watford</td>
    </tr> 
    <tr>
        <td>usa</td>
        <td>new york</td>
    </tr>
    <tr>
        <td>usa</td>
        <td>florida</td>
    </tr> 
</tbody>
</table>

Я создал код, который поможет мне достичь этого результата. Как видите, я включил группировку, используя следующий код:

$(document).ready(function () {
    $("#cities").DataTable({
        drawCallback: function ()
        {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;

            api.column(0, { page: 'current' }).data().each(function (group, i)
            {
                console.log("=> " + group);
                if (last !== group)
                {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan= "8" style="background-color: yellow">'
                        + 'Country' + group + '</td></tr>');

                    last = group;
                }
            });
        }
    });
});

Теперь я хочу применить класс collapse , предоставленный при загрузке, и хочу, чтобы каждый раз, когда пользователь нажимал на контейнер «заголовок, содержащий страну», сгруппированный элемент этого контейнера расширялся или свернуть.

Как мне добиться подобного результата?