title: Add class to clicked item, parent and grand parent and remove it from all the rest
body: <p><strong>This is the html structure</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Stone age&lt;/a&gt; &gt; active
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Mesolithic&lt;/a&gt; &gt; active
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Culture&lt;/a&gt; &gt; active
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Neolithic&lt;/a&gt; &gt; not active &gt; click &gt; this active the others not active
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I click on the third level, the first level looses the class active, when I click on the other element with no siblings or parent, it gets the class active but doesn't remove it from the previous clicked items.</p>
  
  <pre><code>$("a").on("click", function(e) {
      e.preventDefault();
      var $parent = $(this).parent().parent().parent().find("a");
      $("a").not($parent).not($parent.nextAll()).removeClass("active");
      $(this).toggleClass("active");
      $(this).nextAll("ul").toggleClass("closed opened");
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/fdsxnuwp/14/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>How do i toggle the class "active" between siblings, parents and other elements?</p>