Как скрыть свернутый элемент, если отображается еще один

Question

У меня есть 3 кнопки, которые при нажатии обнуляются и отображается форма. Я хочу, если кто-то уже обрушился, тогда я хочу, чтобы он снова спрятался, если щелкнуть другого.

Моя скрипка: https://jsfiddle.net/77soggnv/

Это мой JS код:

$(document).ready(function(){ 

    //See which panel has been clicked 
    $("#citizen").click(function(){ 
     $(this).data('clicked', true); 
    }); 
    $("#organisation").click(function(){ 
     $(this).data('clicked', true); 
    }); 
    $("#anonymous").click(function(){ 
     $(this).data('clicked', true); 
    }); 

    //Hide the other panels if one is clicked 
    if($("#citizen").data('clicked')){ 
     $("#organisation").collapse("hide"); 
     $("#anonymous").collapse("hide"); 
    } 
    if($("#organisation").data('clicked')){ 
     $("#citizen").collapse("hide"); 
     $("#anonymous").collapse("hide"); 
    } 
    if($("#anonymous").data('clicked')){ 
     $("#organisation").collapse("hide"); 
     $("#citizen").collapse("hide"); 
    }  

}); 

Answer 1

Просто вы можете сделать это нравится:

$(".btn").click(function(){ 
    $('.collapse.in').collapse('hide'); 
}); 

Updated Fiddle

Answer 2

Поскольку щелкать элементы имеют общие имена классов и структуры, мы не должны придавать события отдельно.

$(".btn.btn-primary").click(function() { 
    var next = $(this).next(); 
    $(".collapse").not(next).slideUp(); 
    next.slideToggle(); 
}); 

Fiddle

next() метод возвращает элемент после текущего элемента.