CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ernest Appiah
Ernest Appiah

Reputation: 133

How do l toggle item click in a list?

How do l toggle the id="tree" when any of the class="folder" is clicked? My implementation is not working. It keeps toggling only the first item no matter which class="folder" I click. Thanks for your help

 <div class="main">
   <ul class="collections>
      <li class="listitem1">
          <span class="folder"> folder  </span>
          <div id="tree">

               //...THIS IS WHERE THE CONTENT IS

          </div>
    </li>
    <li class"listitem2">
          <span class="folder"> folder  </span>
          <div id="tree">

               //...THIS IS WHERE THE CONTENT IS

          </div>
    </li>
   </ul>
   </div>

JS

$(document).ready(function() {
  $('#tree').slideToggle("fast");
  $('.folder').click(function() {
    $('#tree').slideToggle("fast");
  });
});

Upvotes: 2

Views: 441

Answers (3)

Krish
Krish

Reputation: 1894

Please change the ID in to a class, because ID is unique. Its not allowed same multiple ID name in a document.

$(document).ready(function() {
  $('.tree').hide();
  $('.folder').click(function() {
    $(this).parent().find('.tree').slideToggle("fast");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
   <ul class="collections">
      <li class="listitem1">
          <span class="folder"> folder  </span>
          <div class="tree">

               //...THIS IS WHERE THE CONTENT IS

          </div>
    </li>
    <li class="listitem2">
          <span class="folder"> folder  </span>
          <div class="tree">

               //...THIS IS WHERE THE CONTENT IS

          </div>
    </li>
   </ul></div>

Upvotes: 1

guradio
guradio

Reputation: 15565

$('.tree').slideToggle("fast");
  $('.folder').click(function() {
    $(this).parent().find('.tree').slideToggle("fast");
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
   <ul class="collections">
      <li class="listitem1">
          <span class="folder"> folder  </span>
          <div class="tree">

               THIS
          </div>
    </li>
    <li class="listitem2">
          <span class="folder"> folder  </span>
          <div class="tree">

               THIS IS WHERE THE CONTENT IS

          </div>
    </li>
   </ul>
   </div>

Try using .parent() and then .find() to get the class tree

Upvotes: 2

ketan
ketan

Reputation: 19351

There are id should be unique.

And there are some typo in your html code also. Like = sign is not there after class. And you forget to close the quote.

Use following JQuery.

$(this).siblings("div").slideToggle("fast");

Working Fiddle

Upvotes: 2

Related Questions