How to hide a collapsed element if another one is shown
<p>I have 3 buttons which when clicked collapses and a form is shown. What I want is if one is already collapsed then I want it to hide again if another one is clicked.</p>

<p>My fiddle: <a href="https://jsfiddle.net/77soggnv/" rel="nofollow">https://jsfiddle.net/77soggnv/</a></p>

<p>This is my js code:</p>

<pre><code>$(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");
    }    

});
</code></pre>