**This is the html structure**

```
<ul>
  <li>
    <a href="#">Stone age</a> > active
    <ul>
      <li>
        <a href="#">Mesolithic</a> > active
        <ul>
          <li>
            <a href="#">Culture</a> > active
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Neolithic</a> > not active > click > this active the others not active
      </li>
    </ul>
  </li>
</ul>

```

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.

```
$("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");
});

```

[jsFiddle](https://jsfiddle.net/fdsxnuwp/14/)

How do i toggle the class "active" between siblings, parents and other elements?