title: Bootstrap accordeon - change the relative position to the collapsed/showed content
body: <p>I have this sidebar built as an accordeon (bootsrap 4). I have a long-ish content that displays near the bottom of the page, and it tends to overflow at the bottom. I'd like it to show above the corresponding data-toggler.</p>
  <p><a href="https://i.stack.imgur.com/2qFbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2qFbg.png" alt="Sidebar" /></a></p>
  <p>In other words, when I click the .nav-item with the data-target #create, I'd like the #create div to show up above the .nav-item that toggled it, not below as is currently the case. Html:</p>
  <pre><code>&lt;ul class=&quot;navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled&quot; id=&quot;accordionSidebar&quot;&gt;
      &lt;li class=&quot;nav-item active&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;/myapp/dashboard/&quot;&gt;
              &lt;i class=&quot;fas fa-fw fa-bolt&quot;&gt;&lt;/i&gt;
              &lt;span&gt;Foobar&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;hr class=&quot;sidebar-divider&quot;&gt;
      &lt;div class=&quot;sidebar-heading&quot;&gt;
          Foobar
      &lt;/div&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
      &lt;a class=&quot;nav-link collapsed&quot; href=&quot;#&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#create&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;headingauxiliaries&quot;&gt;
          &lt;i class=&quot;fas fa-plus-circle&quot;&gt;&lt;/i&gt;
          &lt;span&gt;Create&lt;/span&gt;
      &lt;/a&gt;
      &lt;div id=&quot;create&quot; class=&quot;collapse&quot; aria-labelledby=&quot;create&quot; data-parent=&quot;#accordionSidebar&quot; style=&quot;&quot;&gt;
          &lt;div class=&quot;bg-white py-2 collapse-inner rounded&quot;&gt;
              &lt;h6 class=&quot;collapse-header&quot;&gt;New ...&lt;/h6&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/products/create&quot;&gt;Produits&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/products/fournis/create/&quot;&gt;Fournisseurs&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/products/fournis2/create/&quot;&gt;Fournisseurs (autres)&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/admin_accounts/customer/create/&quot;&gt;Client&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/contrats/create/&quot;&gt;Contrat&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/pickings/create/&quot;&gt;Picking&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/po/po/create/&quot;&gt;PO&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/po/sample/create/&quot;&gt;Sample&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/po/claim/create/&quot;&gt;Claim&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/po/commercial/create/&quot;&gt;PO (commercial)&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/rma/create/&quot;&gt;RMA&lt;/a&gt;
              &lt;a class=&quot;collapse-item&quot; href=&quot;/soumission/create/&quot;&gt;Soumission&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
      &lt;hr class=&quot;sidebar-divider d-none d-md-block&quot;&gt;
      &lt;div class=&quot;text-center d-none d-md-inline&quot;&gt;
          &lt;button class=&quot;rounded-circle border-0&quot; id=&quot;sidebarToggle&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>