|
1 2 3 |
<button role="button" id="toggleAll" class="toggleAll" data-expanded="true"> <span class="hide-all">Masquer </span><span class="show-all">Afficher </span>tous les détails </button> |
|
1 2 3 4 5 6 7 8 9 10 |
<tr class="row-hasChildrenTable" aria-expanded="true"> <td>...</td> </tr> <tr class="row-hasChildrenTable" aria-expanded="true"> <td>...</td> </tr> <tr class="row-hasChildrenTable" aria-expanded="true"> <td>...</td> </tr> [...] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.fn.toggleAllDetail = function(parentElement){ const $this = $(this); const state = $this.attr('data-expanded'); const $expandedItems = $('[aria-expanded]', parentElement); if (state === 'true') { $expandedItems.attr('aria-expanded', 'false'); $this.attr('data-expanded', false); } else { $expandedItems.attr('aria-expanded', 'true'); $this.attr('data-expanded', true); } } |
|
1 2 3 |
$('#toggleAll').on('click', function(){ $(this).toggleAllDetail('#tableCart'); }); |
|
1 2 3 4 5 6 7 |
.row-hasChildrenTable[aria-expanded="false"] { display: none; } .toggleAll[data-expanded="true"] .show-all, .toggleAll[data-expanded="false"] .hide-all { display: none; } |