jQuery扩展面板延迟问题

Question

以下code可以正常使用：

$(".expandable span").on('click', function(){

    var open = 'expandable-open',   
        iconAdd = 'icon-add',
        iconRemove = 'icon-subtract';

    if($(this).hasClass(iconAdd)){
        $(".static-hostels-list").removeClass(open);
        $(".expandable span").removeClass(iconRemove).addClass(iconAdd);
    }

    $(this).toggleClass(iconAdd).toggleClass(iconRemove);
    $(this).parent().find(".static-hostels-list").toggleClass(open);

});

然而，当我打开一个面板并关闭另一个面板时，两个动作之间存在延迟（打开一个并关闭另一个）。

我想缩小差距，同时让它发生。

CSS

.static-hostels-list {
    list-style-type: inherit;
    margin: 1rem 0 0 0;
    overflow: hidden;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
    overflow: hidden;
    height: auto;
    max-height: 0;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    transition: max-height 1s;
}

.expandable .expandable-open {
    max-height: 400px;
}