CODEWITHSUNDEEP
jqueryhtmllistslidetoggle
dmnmlk
dmnmlk

Reputation: 77

Jquery nested list collapsing

I have problem with collapsing list using jquery:-

html file 

<ul>
  <li class="dir">subject1
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject2
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject3
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
</ul>

script 

$('.dir').click(function() {
    $(this).children().slideToggle();
});

li tags with dir class are folders and I want only them to collapse when clicked on them.
And now I get that every dir is collapsing even if I use $this. What am I doing wrong?

Upvotes: 4

Views: 3396

Answers (2)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

You need to use stopPropagation property.

$('.dir').click(function(e) {
    e.stopPropagation();
    $(this).children().slideToggle();
});


$('.dir').click(function(e) {
    e.stopPropagation();
    $(this).children().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dir">subject1
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject2
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
  <li class="dir">subject3
      <ul>
          <li class="dir">lab1
              <ul>
                  <li>lab1.pdf</li>
              </ul>
          </li>
          <li class="dir">lab2
              <ul>
                  <li>lab2.pdf</li>
              </ul>
          </li>
          <li class="dir">lab3
              <ul>
                  <li>lab3.pdf</li>
              </ul>
          </li>
      </ul>
  </li>
</ul>

Upvotes: 5

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

if you wrap your outest ul with div you can do 

$('div>ul>li .dir').click(function() {
    $(this).slideToggle();
});

Upvotes: 0

Related Questions