Bootstrap使可折叠子菜单

Question

我正在尝试创建与显示Here

相同的菜单

所以我得到了2个面板，当我点击某个面板时，我需要折叠当前打开的面板并显示点击的面板（如示例中所示）。一次只能打开一个面板。我尝试使用以下代码执行此操作：

$(document).on('click', '.collapse', function(){
    $('.collapse').removeClass('in');

});

但它会立即隐藏所有打开的面板而没有平滑的动画。任何想法如何解决？谢谢。