jQuery collapse and expand table rows on click chevron
Question
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.
<!--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 answers
solution1
3 ACCPTED 2018-08-30 13:07:34
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 pr-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 pr-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 pr-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 pr-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 pr-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 pr-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 pr-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>
solution2
2 2018-08-30 13:03:11
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery expand collapse next row of the table on click of span
Collapse/Expand table columns (not rows)
Javascript - Expand/Collapse table rows
jQuery table row expand/collapse
Material table nested rows expand/collapse in reactjs
how to write jQuery for expand/collapse of rows?
Expand and Collapse of 3 level hierarchical rows in html table
Expand and Collapse HTML Table Data Rows
jQuery expand/collapse hierarchical table row
Expand/Collapse all with Nested Table - jQuery Datatables
Related Tags