CODEWITHSUNDEEP
jqueryshow-hide
Vektor Unbreakable
Vektor Unbreakable

Reputation: 71

Collapse list with jQuery

i'm very noob with jquery. I'm trying collapse a list. Everything is good if i use only inside ul but with this i can't find the error. I need show and hide (collapse) ul, clicking on parent td.

I have this HTML

<td class="parent">Button</td>
<td>
  <ul class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</td>

jQuery

     $('.child').hide();
    $('.parent').click(function() {
        $(this).siblings('.parent').find('ul').slideUp();
        $(this).find('ul').slideToggle();
    });

Upvotes: 0

Views: 136

Answers (1)

dale landry
dale landry

Reputation: 8610

Use the children() selector with your true parent element and slideToggle() OR use $(this) with next().children() and slideToggle() to lightly animate the toggle display. 

$(document).ready(function() {
  $("#row").on("click", "td", function() {
    $(this).next().children().slideToggle();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr id="row">
    <td class="parent">Button</td>
    <td>
      <ul class="child">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </td>
    <tr>
</table>

Upvotes: 1

Related Questions