title: Disable Bootstrap accordion after opening
body: <p>I have a multiple bootstrap accordion running and would like to disable once clicked. One tab has to remain open at all times.</p>
  
  <p>For example, Link1 is already open so link1 should be disabled. Only link2 and link3 should be clickable. How should I achieve this?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
    &lt;a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1"&gt;
      Link 1
    &lt;/a&gt;
    &lt;a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2"&gt;
      Link 2
    &lt;/a&gt;
    &lt;a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3"&gt;
      Link 3
    &lt;/a&gt;
    &lt;div class="collapse in" id="collapseExample1"&gt;
      This is the description 1
    &lt;/div&gt; 
    &lt;div class="collapse" id="collapseExample2"&gt;
      This is the description 2
    &lt;/div&gt; 
    &lt;div class="collapse" id="collapseExample3"&gt;
      This is the description 3
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#accordion').on('show.bs.collapse', function () {
      $('#accordion .in').collapse('hide');
  });
  </code></pre>
  
  <p>JSFiddle Link Demo:
  <a href="https://jsfiddle.net/DTcHh/19604/" rel="nofollow">https://jsfiddle.net/DTcHh/19604/</a></p>