JQuery toggle children recursively

Question

Im not an expert on JQuery so here it is. I have an HTML that looks like this:

<ul class="first-class">
   <li class="second-class">
      <a href="#_">
        <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
            <ul class="subdirectory-class">
               <li class="second-class">
                  <a href="#_">
                     <i class="fa fa-plus"></i>
                  </a>
               </li>
            </ul>
         </li>
     </ul>
   </li>
   <li class="second-class">
      <a href="#_">
         <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
         </li>
     </ul>
   </li>
</ul>

So what i would like to do, is when i press the + sign (fa fa-plus) to toggle its subdirectory. At this point, when i press the + sign all subdirectories are getting toggled. How can i rewrite this jquery code in order to achieve that?

If i press the first + sign, the next, and only the next subdirectory should open. Then when i press the subdirectory, the next subdirectory should open and so on. This applies for the closing part too.

JQUERY currently i have this:

$(document).ready(function(){
    $(".first-class .second-class").click(function(e){
        $(".subdirectory-class", this).first().slideToggle("fast");
        $(this).children("a").toggleClass("closed open");
        e.preventDefault();
    });
});

This hides every ul accept the main one (with css display:none) and when i press on it, then it toggles all subdirectories.

Any help would be very appreciated.

Thanks in advance

Answer 1

If you add e.stopImmediatePropagation() to your code, it will run as you desire.

$(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});

Demo

$(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-class">
  <li class="second-class">
    <a href="#_">1
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">11
          <i class="fa fa-plus"></i>
        </a>
        <ul class="subdirectory-class">
          <li class="second-class">
            <a href="#_">111
              <i class="fa fa-plus"></i>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="second-class">
    <a href="#_">2
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">22
          <i class="fa fa-plus"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>