title: Uncaught ReferenceError: toggleSidebar is not defined
body: <p>im getting this " Uncaught ReferenceError: toggleSidebar is not defined
      at HTMLDivElement.onclick " error when im trying to open my sidebar. 
  It worked in codepen but on my site it doesnt seem to work! 
  My site : Skintheft.com/SufferSite</p>
  
  <p>Index code sample -- </p>
  
  <pre><code>&lt;div id="sidebar"&gt;
      &lt;div class="toggle-btn" onclick="toggleSidebar()"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;ul&gt;  
  
      &lt;li&gt;Home &lt;/li&gt;
      &lt;li&gt;Contact &lt;/li&gt;
      &lt;li&gt;About &lt;/li&gt;
  
      &lt;/ul&gt;
  </code></pre>
  
  <p>css file : </p>
  
  <pre><code>* {
      margin:0px;
      padding:0px;
      font-family:sans-serif;
  }
  
  
  #sidebar { 
    position:fixed;
    width:200px;
    height:100%;
    background:#727e87;
    left:-200px;
    transition: all 250ms linear;
  
  }
  
  #sidebar.active {
      left:0px;
  }
  
  #sidebar ul li {
    color:rgba(230,230,230,0.9);
    list-style:none;
    padding:15px 10px;
    border-bottom: 1px solid rgba(100,100,100,0.3);
  }
  
  #sidebar .toggle-btn {
      position:absolute;
      left:230px;
      top:20px;
  }
  
  #sidebar .toggle-btn span {
      display:block;
      width:30px;
      height:5px; 
      background:#727e87;
      margin: 5px 0px;
  }
  </code></pre>
  
  <p>and last but not least the javascript</p>
  
  <pre><code>function toggleSidebar(){
      document.getElementById("sidebar").classList.toggle('active');
  }
  </code></pre>
  
  <p>I personally don't have any idea on how to fix this, i would deeply appreciate any help! thanks:)</p>