Tableをアコーディオンにする。

テーブルのセルをクリックすると、下の行が表示される。もう一度クリックすると非表示になる。

<table class="table table-bordered ">
    <thead>
        <tr>
            <th>題名</th>
            <th>時間</th>
        </tr>
    </thead>

    <tbody>
	<tr class="item-done clickable" data-toggle="collapse" data-target="#accordion5">
        <td>このカラムをクリックするとメニューを出し入れできる。</td>
        <td>9m25s</td>
    </tr>
    <tr>
        <!-- ここのstleは!importantを使ってcssファイルにした方が良い -->
        <td colspan="2" style="padding:0px">

            <div id="accordion5" class="collapse">
                <ol type="a" style="background-color:white;">
                    <li><a>メニュー１</a></li>
                    <li><a>メニュー２</a></li>
                    <li><a>メニュー３</a></li>
                </ol>
            </div>
        </td>
    </tr>