带jQuery的HTML折叠表行

Question

Trying to collapse row after click on button "collapse". But nothing happens.

What I am doing wrong?

 $(document).ready(function() { $('.clickme').click(function() { $(this).nextUntil('tr#test').slideToggle('slow'); }); }); 

 @font-face { font-family: 'GridGlyphs'; src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff'); } .mvc-grid { line-height: 1.25em; position: relative; overflow-x: auto; font-size: 1rem; } .mvc-grid table { border-collapse: collapse; max-width: 100%; width: 100%; } .mvc-grid th { background-clip: padding-box; background-color: #f7f7f7; position: relative; } .mvc-grid th, .mvc-grid td { border: 1px solid #dee2e6; padding: 0.75em; } .mvc-grid .filterable { padding-right: 3.5em; } .mvc-grid .sortable, .mvc-grid .mvc-grid-filter { cursor: pointer; } .mvc-grid .asc::after { padding-left: 3px; content: '\\2193'; } .mvc-grid .desc::after { padding-left: 3px; content: '\\2191'; } .mvc-grid-hidden, .mvc-grid-options { display: none; } .mvc-grid-filter { background-color: rgba(0, 0, 0, 0.03); transition: background-color 0.5s; font-family: 'GridGlyphs'; position: absolute; font-weight: bold; width: 2.75em; border: none; height: 100%; right: 0; top: 0; } .mvc-grid-filter:focus, .mvc-grid-filter:hover { background-color: rgba(0, 0, 0, 0.06); color: inherit; } .mvc-grid-filter::before { content: '\\0041'; } .mvc-grid-filter.applied::before { content: '\\0042'; } .mvc-grid-row-filters .filterable { padding: 0.25em; } .mvc-grid-row-filters th div { display: flex; } .mvc-grid-row-filters .mvc-grid-value { border: 0.5px solid #aaaaaa; margin-right: 0.25em; line-height: normal; font-weight: bold; padding: 0 0.2em; flex: 1; } .mvc-grid-row-filters input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-row-filters .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-row-filters .mvc-grid-value::placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-filter { border: 0.5px solid #aaaaaa; flex: 0 0 2.125em; position: static; height: 2.125em; } .mvc-grid-row-filters [readonly] { background-color: #e4e4e4; } .mvc-grid-row-filters.mvc-grid-headers .filterable { padding: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value { padding: 0.625em 3.5em 0.625em 0.75em; background-color: #f7f7f7; border: none; margin: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter { position: absolute; border: none; height: 100%; } .mvc-grid-popup { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); background-clip: padding-box; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; position: absolute; min-width: 12em; font-size: 1rem; z-index: 1100; } .mvc-grid-popup.mvc-grid-guid-filter { min-width: 20em; } .mvc-grid-popup .popup-arrow { border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 8px solid #ffffff; box-sizing: border-box; position: absolute; height: 9px; top: -8px; } .mvc-grid-popup .popup-arrow::after { border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 9px solid #cccccc; position: absolute; content: " "; z-index: -1; left: -8px; top: -1px; } .mvc-grid-popup .popup-content { padding: 0.5em; } .mvc-grid-popup .popup-group { padding: 0.2em; } .mvc-grid-popup .popup-operator { text-align: center; } .mvc-grid-popup .popup-actions { padding: 0.4em 0 0.2em; text-align: center; } .mvc-grid-popup .mvc-grid-value, .mvc-grid-popup .mvc-grid-method, .mvc-grid-popup .mvc-grid-operator { border: 1px solid #cccccc; box-sizing: border-box; font-size: 0.9em; padding: 0 0.2em; height: 2.5em; width: 100%; } .mvc-grid-popup .mvc-grid-operator { width: auto; } .mvc-grid-popup input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-popup .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-popup .mvc-grid-apply, .mvc-grid-popup .mvc-grid-cancel { border: 1px solid #ffffff; padding: 0.25em; cursor: pointer; min-width: 4em; color: #ffffff; outline: 0; } .mvc-grid-popup .mvc-grid-apply { background-color: #28a745; border-color: #28a745; margin-right: 0.3em; } .mvc-grid-popup .mvc-grid-apply:focus { box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5); } .mvc-grid-popup .mvc-grid-cancel { background-color: #dc3545; border-color: #dc3545; margin-left: 0.3em; } .mvc-grid-popup .mvc-grid-cancel:focus { box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5); } .mvc-grid-pager, .mvc-grid-empty-row { text-align: center; } .mvc-grid-pager button { background-color: #ffffff; border: 1px solid #dddddd; box-sizing: content-box; line-height: 2.5em; padding: 0 0.25em; cursor: pointer; margin: 0.5em 0; min-width: 2em; color: #337ab7; } .mvc-grid-pager button:focus, .mvc-grid-pager button:hover { background-color: #f7f7f7; color: #014c8c; } .mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover { background-color: #0275d8; border-color: #0275d8; color: #ffffff; } .mvc-grid-pager .disabled, .mvc-grid-pager .disabled:focus, .mvc-grid-pager .disabled:hover { background-color: #efefef; cursor: not-allowed; color: #777777; outline: none; } .mvc-grid-page-sizes { display: inline-block; margin-left: 0.5em; } .mvc-grid-page-sizes select { border: 1px solid #dddddd; padding: 0.5em 0; font: inherit; } .mvc-grid-page-sizes input { border: 1px solid #dddddd; box-sizing: content-box; text-align: center; padding: 0 0.25em; height: 2.5em; width: 2.5em; } .mvc-grid-loader { background-color: rgba(0, 0, 0, 0.3); justify-content: center; transition: opacity 1s; align-items: center; position: absolute; display: flex; z-index: 100; height: 100%; cursor: wait; width: 100%; opacity: 0; left: 0; top: 0; } .mvc-grid-loading { opacity: 1; } .mvc-grid-loading>div>div { animation: loader-points 1.4s infinite ease-in-out both; background-color: #f5f5f5; display: inline-block; border-radius: 100%; margin: 0 0.75em; height: 1.5em; width: 1.5em; } .mvc-grid-loading>div>div:nth-child(1) { animation-delay: -0.32s; } .mvc-grid-loading>div>div:nth-child(2) { animation-delay: -0.16s; } @keyframes loader-points { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr id="test"> <td><button class="clickme">collapse</button></td> <td>name2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr clss="test"> <td><button class="clickme">collapse</button></td> <td>name3</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

Answer 1

nextUntil all following siblings of the element until ( not including ) the specified element.

The button and the tr#test are not siblings. BUtton doesn't have any siblings so there is nothing to show.

So you need to first select the button's parent (tr) and use nextAll on that tr which is siblings with the tr#test . Also as it has been pointed out in the other answer, do not use duplicate id's but use classes instead class='test'

I guess in the 'real' app you will have more siblings between the button's parent tr and the tr you want to hide.

Else, use next() instead of nextUntil() as the tr you want to hide is the closest sibling of the tr that has the button

 $(document).ready(function() { $('.clickme').click(function() { $(this).closest('tr').nextUntil('tr.test').slideToggle('slow'); }); }); 

 @font-face { font-family: 'GridGlyphs'; src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff'); } .mvc-grid { line-height: 1.25em; position: relative; overflow-x: auto; font-size: 1rem; } .mvc-grid table { border-collapse: collapse; max-width: 100%; width: 100%; } .mvc-grid th { background-clip: padding-box; background-color: #f7f7f7; position: relative; } .mvc-grid th, .mvc-grid td { border: 1px solid #dee2e6; padding: 0.75em; } .mvc-grid .filterable { padding-right: 3.5em; } .mvc-grid .sortable, .mvc-grid .mvc-grid-filter { cursor: pointer; } .mvc-grid .asc::after { padding-left: 3px; content: '\\2193'; } .mvc-grid .desc::after { padding-left: 3px; content: '\\2191'; } .mvc-grid-hidden, .mvc-grid-options { display: none; } .mvc-grid-filter { background-color: rgba(0, 0, 0, 0.03); transition: background-color 0.5s; font-family: 'GridGlyphs'; position: absolute; font-weight: bold; width: 2.75em; border: none; height: 100%; right: 0; top: 0; } .mvc-grid-filter:focus, .mvc-grid-filter:hover { background-color: rgba(0, 0, 0, 0.06); color: inherit; } .mvc-grid-filter::before { content: '\\0041'; } .mvc-grid-filter.applied::before { content: '\\0042'; } .mvc-grid-row-filters .filterable { padding: 0.25em; } .mvc-grid-row-filters th div { display: flex; } .mvc-grid-row-filters .mvc-grid-value { border: 0.5px solid #aaaaaa; margin-right: 0.25em; line-height: normal; font-weight: bold; padding: 0 0.2em; flex: 1; } .mvc-grid-row-filters input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-row-filters .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-row-filters .mvc-grid-value::placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-filter { border: 0.5px solid #aaaaaa; flex: 0 0 2.125em; position: static; height: 2.125em; } .mvc-grid-row-filters [readonly] { background-color: #e4e4e4; } .mvc-grid-row-filters.mvc-grid-headers .filterable { padding: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value { padding: 0.625em 3.5em 0.625em 0.75em; background-color: #f7f7f7; border: none; margin: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter { position: absolute; border: none; height: 100%; } .mvc-grid-popup { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); background-clip: padding-box; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; position: absolute; min-width: 12em; font-size: 1rem; z-index: 1100; } .mvc-grid-popup.mvc-grid-guid-filter { min-width: 20em; } .mvc-grid-popup .popup-arrow { border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 8px solid #ffffff; box-sizing: border-box; position: absolute; height: 9px; top: -8px; } .mvc-grid-popup .popup-arrow::after { border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 9px solid #cccccc; position: absolute; content: " "; z-index: -1; left: -8px; top: -1px; } .mvc-grid-popup .popup-content { padding: 0.5em; } .mvc-grid-popup .popup-group { padding: 0.2em; } .mvc-grid-popup .popup-operator { text-align: center; } .mvc-grid-popup .popup-actions { padding: 0.4em 0 0.2em; text-align: center; } .mvc-grid-popup .mvc-grid-value, .mvc-grid-popup .mvc-grid-method, .mvc-grid-popup .mvc-grid-operator { border: 1px solid #cccccc; box-sizing: border-box; font-size: 0.9em; padding: 0 0.2em; height: 2.5em; width: 100%; } .mvc-grid-popup .mvc-grid-operator { width: auto; } .mvc-grid-popup input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-popup .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-popup .mvc-grid-apply, .mvc-grid-popup .mvc-grid-cancel { border: 1px solid #ffffff; padding: 0.25em; cursor: pointer; min-width: 4em; color: #ffffff; outline: 0; } .mvc-grid-popup .mvc-grid-apply { background-color: #28a745; border-color: #28a745; margin-right: 0.3em; } .mvc-grid-popup .mvc-grid-apply:focus { box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5); } .mvc-grid-popup .mvc-grid-cancel { background-color: #dc3545; border-color: #dc3545; margin-left: 0.3em; } .mvc-grid-popup .mvc-grid-cancel:focus { box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5); } .mvc-grid-pager, .mvc-grid-empty-row { text-align: center; } .mvc-grid-pager button { background-color: #ffffff; border: 1px solid #dddddd; box-sizing: content-box; line-height: 2.5em; padding: 0 0.25em; cursor: pointer; margin: 0.5em 0; min-width: 2em; color: #337ab7; } .mvc-grid-pager button:focus, .mvc-grid-pager button:hover { background-color: #f7f7f7; color: #014c8c; } .mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover { background-color: #0275d8; border-color: #0275d8; color: #ffffff; } .mvc-grid-pager .disabled, .mvc-grid-pager .disabled:focus, .mvc-grid-pager .disabled:hover { background-color: #efefef; cursor: not-allowed; color: #777777; outline: none; } .mvc-grid-page-sizes { display: inline-block; margin-left: 0.5em; } .mvc-grid-page-sizes select { border: 1px solid #dddddd; padding: 0.5em 0; font: inherit; } .mvc-grid-page-sizes input { border: 1px solid #dddddd; box-sizing: content-box; text-align: center; padding: 0 0.25em; height: 2.5em; width: 2.5em; } .mvc-grid-loader { background-color: rgba(0, 0, 0, 0.3); justify-content: center; transition: opacity 1s; align-items: center; position: absolute; display: flex; z-index: 100; height: 100%; cursor: wait; width: 100%; opacity: 0; left: 0; top: 0; } .mvc-grid-loading { opacity: 1; } .mvc-grid-loading>div>div { animation: loader-points 1.4s infinite ease-in-out both; background-color: #f5f5f5; display: inline-block; border-radius: 100%; margin: 0 0.75em; height: 1.5em; width: 1.5em; } .mvc-grid-loading>div>div:nth-child(1) { animation-delay: -0.32s; } .mvc-grid-loading>div>div:nth-child(2) { animation-delay: -0.16s; } @keyframes loader-points { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name3</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

Answer 2

Go up to the parent tr using .closest('tr') then select the next one using .next('tr') :

$(this).closest('tr').next('tr').slideToggle('slow');

NOTE: Make sure there's no duplicate id test , and use common classes instead.

NOTE 2: The nextUntil() you were using will work too, but it will search through the successors when there's no need for this, the next() method is faster since it will target the next element directly.

Working snippet:

 $(document).ready(function() { $('.clickme').click(function() { $(this).closest('tr').next('tr').slideToggle('slow'); }); }); 

 @font-face { font-family: 'GridGlyphs'; src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff'); } .mvc-grid { line-height: 1.25em; position: relative; overflow-x: auto; font-size: 1rem; } .mvc-grid table { border-collapse: collapse; max-width: 100%; width: 100%; } .mvc-grid th { background-clip: padding-box; background-color: #f7f7f7; position: relative; } .mvc-grid th, .mvc-grid td { border: 1px solid #dee2e6; padding: 0.75em; } .mvc-grid .filterable { padding-right: 3.5em; } .mvc-grid .sortable, .mvc-grid .mvc-grid-filter { cursor: pointer; } .mvc-grid .asc::after { padding-left: 3px; content: '\\2193'; } .mvc-grid .desc::after { padding-left: 3px; content: '\\2191'; } .mvc-grid-hidden, .mvc-grid-options { display: none; } .mvc-grid-filter { background-color: rgba(0, 0, 0, 0.03); transition: background-color 0.5s; font-family: 'GridGlyphs'; position: absolute; font-weight: bold; width: 2.75em; border: none; height: 100%; right: 0; top: 0; } .mvc-grid-filter:focus, .mvc-grid-filter:hover { background-color: rgba(0, 0, 0, 0.06); color: inherit; } .mvc-grid-filter::before { content: '\\0041'; } .mvc-grid-filter.applied::before { content: '\\0042'; } .mvc-grid-row-filters .filterable { padding: 0.25em; } .mvc-grid-row-filters th div { display: flex; } .mvc-grid-row-filters .mvc-grid-value { border: 0.5px solid #aaaaaa; margin-right: 0.25em; line-height: normal; font-weight: bold; padding: 0 0.2em; flex: 1; } .mvc-grid-row-filters input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-row-filters .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-row-filters .mvc-grid-value::placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder { color: #bbbbbb; } .mvc-grid-row-filters .mvc-grid-filter { border: 0.5px solid #aaaaaa; flex: 0 0 2.125em; position: static; height: 2.125em; } .mvc-grid-row-filters [readonly] { background-color: #e4e4e4; } .mvc-grid-row-filters.mvc-grid-headers .filterable { padding: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value { padding: 0.625em 3.5em 0.625em 0.75em; background-color: #f7f7f7; border: none; margin: 0; } .mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter { position: absolute; border: none; height: 100%; } .mvc-grid-popup { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); background-clip: padding-box; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; position: absolute; min-width: 12em; font-size: 1rem; z-index: 1100; } .mvc-grid-popup.mvc-grid-guid-filter { min-width: 20em; } .mvc-grid-popup .popup-arrow { border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 8px solid #ffffff; box-sizing: border-box; position: absolute; height: 9px; top: -8px; } .mvc-grid-popup .popup-arrow::after { border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 9px solid #cccccc; position: absolute; content: " "; z-index: -1; left: -8px; top: -1px; } .mvc-grid-popup .popup-content { padding: 0.5em; } .mvc-grid-popup .popup-group { padding: 0.2em; } .mvc-grid-popup .popup-operator { text-align: center; } .mvc-grid-popup .popup-actions { padding: 0.4em 0 0.2em; text-align: center; } .mvc-grid-popup .mvc-grid-value, .mvc-grid-popup .mvc-grid-method, .mvc-grid-popup .mvc-grid-operator { border: 1px solid #cccccc; box-sizing: border-box; font-size: 0.9em; padding: 0 0.2em; height: 2.5em; width: 100%; } .mvc-grid-popup .mvc-grid-operator { width: auto; } .mvc-grid-popup input.mvc-grid-value { padding: 0 0.5em; } .mvc-grid-popup .mvc-grid-value.invalid { outline-color: #dc3545; } .mvc-grid-popup .mvc-grid-apply, .mvc-grid-popup .mvc-grid-cancel { border: 1px solid #ffffff; padding: 0.25em; cursor: pointer; min-width: 4em; color: #ffffff; outline: 0; } .mvc-grid-popup .mvc-grid-apply { background-color: #28a745; border-color: #28a745; margin-right: 0.3em; } .mvc-grid-popup .mvc-grid-apply:focus { box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5); } .mvc-grid-popup .mvc-grid-cancel { background-color: #dc3545; border-color: #dc3545; margin-left: 0.3em; } .mvc-grid-popup .mvc-grid-cancel:focus { box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5); } .mvc-grid-pager, .mvc-grid-empty-row { text-align: center; } .mvc-grid-pager button { background-color: #ffffff; border: 1px solid #dddddd; box-sizing: content-box; line-height: 2.5em; padding: 0 0.25em; cursor: pointer; margin: 0.5em 0; min-width: 2em; color: #337ab7; } .mvc-grid-pager button:focus, .mvc-grid-pager button:hover { background-color: #f7f7f7; color: #014c8c; } .mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover { background-color: #0275d8; border-color: #0275d8; color: #ffffff; } .mvc-grid-pager .disabled, .mvc-grid-pager .disabled:focus, .mvc-grid-pager .disabled:hover { background-color: #efefef; cursor: not-allowed; color: #777777; outline: none; } .mvc-grid-page-sizes { display: inline-block; margin-left: 0.5em; } .mvc-grid-page-sizes select { border: 1px solid #dddddd; padding: 0.5em 0; font: inherit; } .mvc-grid-page-sizes input { border: 1px solid #dddddd; box-sizing: content-box; text-align: center; padding: 0 0.25em; height: 2.5em; width: 2.5em; } .mvc-grid-loader { background-color: rgba(0, 0, 0, 0.3); justify-content: center; transition: opacity 1s; align-items: center; position: absolute; display: flex; z-index: 100; height: 100%; cursor: wait; width: 100%; opacity: 0; left: 0; top: 0; } .mvc-grid-loading { opacity: 1; } .mvc-grid-loading>div>div { animation: loader-points 1.4s infinite ease-in-out both; background-color: #f5f5f5; display: inline-block; border-radius: 100%; margin: 0 0.75em; height: 1.5em; width: 1.5em; } .mvc-grid-loading>div>div:nth-child(1) { animation-delay: -0.32s; } .mvc-grid-loading>div>div:nth-child(2) { animation-delay: -0.16s; } @keyframes loader-points { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>2</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr> <tr class="test"> <td><button class="clickme">collapse</button></td> <td>name3</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="8" class="parent"> <div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url=""> <table> <thead> <tr class="mvc-grid-headers "> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> <th> <span class="mvc-grid-header-title ">Test1</span> </th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>