title: How add an transition for sub sidebar?
body: <p>I need you for resolving my problem
  I built two sidebar with bootstrap 4.
  His is good but without transitions and effects.
  When i click the link "Dashboard" for openning the 2nd sidebar, it's open very fast.</p>
  
  <p>I want some awesome effects.
  Have you some ideas?
  Thanks you a lot</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#sidebar1{
  
      background-color: #ccc;
      height: 400px;
  }
  
  #sidebar2{
      background-color: #aaa;
  width: 100px; 
  height: 400px; 
  
  }
  
  #main{
      background-color: #eee;
      height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-md-3 collapse show bg-default" id="sidebar1"&gt;
        &lt;h2&gt;I'm a sidebar 1&lt;/h2&gt;
        &lt;ul class="nav flex-column"&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link active" href="#sidebar2" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample"&gt;
                    Dashboard &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;
                    &lt;span data-feather="file"&gt;&lt;/span&gt;
                    Orders
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;
                    Products
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;nav class="col-md-3 collapse show" id="sidebar2"&gt;
        &lt;h2&gt;I'm a sidebar 2&lt;/h2&gt;      
      &lt;/nav&gt;
      &lt;main class="col-md-6" id="main"&gt;
        &lt;h2&gt;I'm the main content&lt;/h2&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my <a href="https://www.codeply.com/go/DiyfO4UqAy" rel="nofollow noreferrer">codeply</a></p>