title: bootstrap collapse only one open at a time
body: <p>I need help correcting this code. I want to open only 1 element at a time but I can't figure out how to do it. if I click two they both open and the other doesn't close.</p>
  
  <p>i use</p>
  
  <pre><code>&lt;div class="accordion" id="accordion"&gt;
    &lt;div class="row"&gt;
  &lt;!--NUMERO 1--&gt;
  &lt;div class="panel clp" style="width: 100%" onmouseover="numero1();" onmouseout="defaultc();"&gt;
    &lt;div class="panel-heading" id="headingOne"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a role="collapsed" data-toggle="collapse" data-parent="#accordion" data-target="collapseOne" aria-expanded="false" aria-controls="collapseOne"&gt;
            UI / UX
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
      &lt;div class="panel-body"&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--NUMERO 2--&gt;
  &lt;div class="panel panel-default clp"  style="width: 100%" onmouseover="numero2();" onmouseout="defaultc();"&gt;
      &lt;div class="panel-heading" role="tab" id="headingTwo" &gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-target="collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
              Branding &amp; Art Direction 
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
        &lt;div class="panel-body"&gt;
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>also i use this function to hide and show the element.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>$("#headingOne").parent('.panel').hover(
    function() {
      $(this).children('.collapse').collapse('show');
    }, function() {
      $(this).children('.collapse').collapse('hide');
    }
  );
  $("#headingTwo").parent('.panel').hover(
    function() {
      $(this).children('.collapse').collapse('show');
    }, function() {
      $(this).children('.collapse').collapse('hide');
    }
  );
  </code></pre>