title: Stop expanded content to appear when page loads
body: <p>I have a sidebar with numbers that expands on hover, to show text beside it. But when I refresh the page, for a split second the 'hidden' content shows before collapsing again. How can I stop this from happening?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class="sidebar"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;01&lt;/span&gt; HomePage&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;02&lt;/span&gt; SubPage 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;03&lt;/span&gt; SubPage 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;04&lt;/span&gt; SubPage 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;&lt;span&gt;05&lt;/span&gt; SubPage 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  .sidebar {
    position: fixed;
    width:80px;
    height:100vw;
    top:0;
    left:0;
    z-index:100;
    background:#111;
    color:#fff;
    overflow:hidden;
  }
  .sidebar ul {
    margin:0;
    padding:0;
    width:200px;
    margin:10px;
    list-style:none;
  }
  .sidebar a span {
    margin:0 10px 0 0;
  }
  .sidebar a {
    color:#fff;
    font-size:14px;
    text-decoration:none;
  }
  </code></pre>
  
  <p>And jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      $('.sidebar').hover(function(){
          $(this).animate({width:'110px'},500);
      },function(){
          $(this).animate({width:'35px'},500);
      }).trigger('mouseleave');
  });
  </code></pre>
  
  <p>What did I do wrong? And how can I fix it?
  Thank you!</p>