title: Vanilla Javascript: Remove toggle class from X element if I click on Y element with the same toggle class
body: <p>I'm currently working on a sidebar menu where I toggle the "selected" class on a category, which has the classname "sidebar-category".</p>
  
  <p>With jQuery I can easily achieve my desired goal: after toggling the "selected" class (if I click on another category) the previous category gets the class removed and is then applied to the currently clicked category:</p>
  
  <pre><code>$('.sidebar-category').click(function() {
    $(".sidebar-category").not(this).removeClass("selected");
    $(this).toggleClass('selected');
  });
  </code></pre>
  
  <p>My problem is that for this project I cannot use jQuery and must use vanilla Javascript.</p>
  
  <p>So far I can achieve the toggling easily, but I'm not sure how I can remove the class when clicking on another category using vanilla Javascript. This is my current code:</p>
  
  <pre><code>var selectCategory = document.getElementsByClassName('sidebar-category');
  
  for (var i = 0, l = selectCategory.length; i &lt; l; i++) {
    selectCategory[i].onclick = function() {
    this.classList.toggle('selected');
    }
  }
  </code></pre>