title: how to change collapse direction of a panel in bootstrap
body: <p>I have a well-known basic collapsible panel which its codes mentioned belowed. I changed some properties via css sets like collapse-in and collapse height&amp;width but could not achieve to change collapsing direction. I want to change it towards top opposite to default position. How can I do that? I assure you that I tried several ways but could not solve the issue.</p>
  
  <pre><code>&lt;div class="panel-group"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h4 class="panel-title"&gt;
                          &lt;a data-toggle="collapse" href="#collapse1"&gt;Collapsible panel&lt;/a&gt;
                      &lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;div id="collapse1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Panel Body&lt;/div&gt;
              &lt;div class="panel-footer"&gt;Panel Footer&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/IIrBG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IIrBG.png" alt="enter image description here"></a></p>