jQuery collapse and expand table rows on click chevron

1
votes

I have a table with multiple levels of rows which is able to collapse and expand. Please refer to the following JSFiddle

Currently the rows are expanding/collapsing when click on the table row. But Instead I want this to happen only when click on the chevron far left. I was playing around the code but couldn't figure out a way to do this.

JS Fiddle

    <!--Table-->
<table class="table table-hover table-curriculum" id="mytable">
    <!--Table head-->
    <thead>
    <tr class="table-head">
        <th>Subject</th>
        <th>Type</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Logged By</th>
        <th>Status</th>
        <th><a data-toggle="modal" data-target="#columnOption"><i class="fa fa-plus-circle" aria-hidden="true"></i></a></th>
    </tr>
    </thead>
    <!--Table head-->
    <!--Table body-->
    <tbody>
    <tr data-depth="0" class="collapse-table level0">
        <td class="milestones" data-field="name" colspan="6"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i><strong>English</strong></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="1" class="collapse-table level1">
        <td class="goals" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language (Strands)</td>
        <td data-field="type">Milestone</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-warning">In Progress</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="goal-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="2" class="collapse-table level2">
        <td class="tasks" data-field="name" ><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language variation (Topics)</td>
        <td data-field="type">Goal</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-danger">New</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="3" class="collapse-table level3">
        <td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1443 (outcome)</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name">MCQ1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 2</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="3" class="collapse-table level3">
        <td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1453 (outcome)</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name">MCQ1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 3</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 4</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    </tbody>
    <!--Table body-->
</table>
<!--Table-->

JS

$('.collapse-table').on('click', function() {
                //console.log($(this).attr('data-depth'));
                var findChildren = function(tr) {
                  var depth = tr.data('depth');
                  return tr.nextUntil($('tr').filter(function() {
                    return $(this).data('depth') <= depth;
                  }));
                };

                var children = findChildren($(this));
                if ($(children).is(':visible')) {
                  $(this).addClass("closed");
                  $(children).hide();
                } else {
                  $(this).removeClass("closed");
                  $(children).show();
                  var children = findChildren($(".closed"));
                  $(children).hide();
                }

});
2
javascriptjqueryhtml
target fa-chevron-down class instead of your current selector and then use the .closest() jquery method to look for the row and it should work. - Si8

2 Answers

3
votes

You need to attach the listener to the chevron icon, then passing to findChildren funciton it's parent, using closest("tr"). (documentation)

Test below snippet code clicking to show then to run, does this help?

$(".fa-chevron-down").on("click", function(){
   let _thisJq = $(this);
   let parent = $(this).closest("tr");
   let children = $(findChildren(parent));
   
   if (children.is(':visible')) {
      _thisJq.addClass("closed");
      _thisJq.removeClass("fa-chevron-down"); 
      _thisJq.addClass("fa-chevron-up");
      
      children.hide();
      
   } else {
      _thisJq.removeClass("closed");
      _thisJq.removeClass("fa-chevron-up"); 
      _thisJq.addClass("fa-chevron-down");
      
      children.show();
      let childrenB = findChildren($(".closed"));
      $(childrenB).hide();
   }
});

var findChildren = function(tr) {
  var depth = tr.data('depth');
  return tr.nextUntil($('tr').filter(function() {
     return $(this).data('depth') <= depth;
  }));
};
.milestones {
  padding-left: 15px !important;
}

.goals {
  padding-left: 35px !important;
}

.tasks {
  padding-left: 55px !important;
}

.sub-tasks {
  padding-left: 75px !important;
}

.grand-tasks {
  padding-left: 95px !important;
}

.grand-sub-tasks {
  padding-left: 115px !important;
}
      
tbody tr td:first-child i {
    padding-right: 10px;
}                       

.fa-chevron-up, .fa-chevron-down{
  cursor: pointer;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<!--Table-->
<table class="table table-hover table-curriculum" id="mytable">
    <!--Table head-->
    <thead>
    <tr class="table-head">
        <th>Subject</th>
        <th>Type</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Logged By</th>
        <th>Status</th>
        <th><a data-toggle="modal" data-target="#columnOption"><i class="fa fa-plus-circle" aria-hidden="true"></i></a></th>
    </tr>
    </thead>
    <!--Table head-->
    <!--Table body-->
    <tbody>
    <tr data-depth="0" class="collapse-table level0">
        <td class="milestones" data-field="name" colspan="6"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i><strong>English</strong></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="1" class="collapse-table level1">
        <td class="goals" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language (Strands)</td>
        <td data-field="type">Milestone</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-warning">In Progress</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="goal-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="2" class="collapse-table level2">
        <td class="tasks" data-field="name" ><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Language variation (Topics)</td>
        <td data-field="type">Goal</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-danger">New</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="3" class="collapse-table level3">
        <td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1443 (outcome)</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name">MCQ1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 2</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="3" class="collapse-table level3">
        <td class="sub-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>CELA1453 (outcome)</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name">MCQ1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="4" class="collapse-table level4">
        <td class="grand-tasks" data-field="name"><i class="fa fa-chevron-down p-r-10" aria-hidden="true"></i>Assignment 1</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 3</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    <tr data-depth="5" class="collapse-table level5">
        <td class="grand-sub-tasks" data-field="name">OE 4</td>
        <td data-field="type">Action Item</td>
        <td data-field="date">03/08/2018</td>
        <td data-field="date">17/08/2018</td>
        <td data-field="logged">Assignee 1</td>
        <td data-field="status"><label class="label label-success">Completed</label></td>
        <td class="dropdown"><a href="" class="dropdown-toggle" id="dropMenu1" data-toggle="dropdown"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a id="action-item-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
                <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
                <li><a role="menuitem" class="create-child" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
            </ul>
        </td>
    </tr>

    </tbody>
    <!--Table body-->
</table>
<!--Table-->

<ul class="dropdown-menu" id="contextMenu" role="menu" style="display:none">
    <li><a id="milestone-form" role="menuitem" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> View Details</a></li>
    <li><a role="menuitem" href="#"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</a></li>
    <li><a role="menuitem" href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></li>
    <li><a role="menuitem" href="#"><i class="fa fa-files-o" aria-hidden="true"></i> Clone</a></li>
    <li><a role="menuitem" class="create-child"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create New Child</a></li>
</ul>
2
votes

just some small edits to bind the collapse function to the chevron itself, then from the chevron find the nearest tr row and collapse it.

http://jsfiddle.net/s81j70n3/21/

$(".fa-chevron-down").on('click', function() {
                //console.log($(this).attr('data-depth'));
                var tr = $(this).closest('tr');
                var tbl = $(this).closest('.collapse-table');

                var findChildren = function(tr) {
                  var depth = tr.data('depth');
                  return tr.nextUntil($('tr').filter(function() {
                    return $(this).data('depth') <= depth;
                  }));
                };

                var children = findChildren(tr);

                if ($(children).is(':visible')) {
                  $(this).addClass("closed");
                  $(children).hide();
                } else {
                  $(this).removeClass("closed");
                  $(children).show();
                  var children = findChildren($(".closed"));
                  $(children).hide();
                }

              });