title: jQuery .fadeIn() makes an element slide from the bottom upon sidebar expansion
body: <p>I have an issue with my sidebar. I want to hide the logo title when the sidebar is collapsed and show when the sidebar is expanded. Now I'm using jQuery's fade in and fade out effect to achieve this. However, upon expanding the sidebar, the menu item <code>HOME</code> slides up from the bottom, which doesn't look good.</p>
  <p>I'm assuming that the logo title is taking up space above <code>HOME</code> and when the sidebar toggle button is pressed, the title moves to the top beside the logo and <code>HOME</code> slides up.</p>
  <p>How can I achieve a smooth hide/show effect upon collapsing/expanding the sidebar without having an impact on other elements?</p>
  <p>Here's the link to the full code with the actual problem: <a href="https://codepen.io/zakero/pen/LYNEPKa" rel="nofollow noreferrer">Codepen</a></p>
  <p>Here's a sample code which I tried:</p>
  <p>HTML</p>
  <pre><code>&lt;nav id=&quot;sidebar&quot; class=&quot;active&quot;&gt;
      &lt;h1&gt;
         &lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;&lt;span class=&quot;fas fa-globe-americas&quot;&gt;&lt;/span&gt; &lt;span class=&quot;logo-title&quot;&gt;villa&lt;/span&gt;&lt;/a&gt;
       &lt;/h1&gt;
  
       &lt;ul class=&quot;list-unstyled components mb-5&quot;&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;fa fa-home&quot;&gt;&lt;/span&gt; Home&lt;/a&gt;
            &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>jQUery</p>
  <pre><code>(function($) {
  
      &quot;use strict&quot;;
  
      $('#sidebarCollapse').on('click', function () {
  
        $('#sidebar').toggleClass('active');
  
        if($('#sidebar').hasClass('active')) {
          $('#sidebar .logo .logo-title').fadeOut(1);
        }else{
          $('#sidebar .logo .logo-title').fadeIn(1000);
        }
  
      });
  
  })(jQuery);
  </code></pre>