使用表创建一个手风琴

Question

我正在尝试创建一个手风琴类型的响应表。当屏幕尺寸低于767px宽度时，我使用了jquery.mobile.js来实现响应式布局。所以我的表变成行，其中每行重复THead。我想要做的是使所有行都折叠接受第一行。我有这个工作，但当你打开第一个实例所有行打开。我只希望你点击的那个打开。

这是Jquery：

jQuery(function($){
    responsiveTables();
    /*===================
      SB: RESPONSIVE TABLES
    =====================*/
    function responsiveTables() {
        if ($(window).width() < 767) {
            $('.first').append('<button name="button" class="responsiveTableTdLink glyphicon glyphicon-chevron-down"></button>');
            $('.tdCollapse').hide();
            $('button.responsiveTableTdLink').click(function(){
                $('.tdCollapse').slideToggle(100);
                $("table button").toggleClass(function() {
                    if ($(this).parent().is(".glyphicon-chevron-down")) {
                        $("table button").addClass("responsiveTableTdLink glyphicon glyphicon-chevron-down");
                    } else {
                        $("table button").addClass("responsiveTableTdLink glyphicon glyphicon-chevron-down");
                    }
                });
            });
        }
        else {
            //Do nothing
        }
    }
});