Свернуть строки таблицы на загрузке страницы

Question

У меня есть jquery, который сжимает некоторые строки таблицы при нажатии. Есть ли способ изменить его так, чтобы он загружался в руинах, а не открыт?

HTML:

<table class="mob-table"> 
<tbody> 
    <tr class="collapse"> 
     <td class="mob-dark">Listing - First Last</td> 
    </tr> 
    <tr> 
     <td>Name: First Last</td> 
    </tr> 
    <tr> 
     <td>Email: test@test.com</td> 
    </tr> 
    <tr> 
     <td>Number: 123-456-7890</td> 
    </tr> 
</tbody> 
</table> 
<table> 
<tbody> 
    <tr class="collapse"> 
     <td class="mob-dark">Listing - First Last</td> 
    </tr> 
    <tr> 
     <td>Name: First Last</td> 
    </tr> 
    <tr> 
     <td>Email: test@test.com</td> 
    </tr> 
    <tr> 
     <td>Number: 123-456-7890</td> 
    </tr> 
</tbody> 
</table> 

Jquery:

$('.collapse').click(function(){ 
    $(this).nextUntil('tr.collapse').toggle(); 
}); 

JSFIDDLE

Answer 1

попробовать это

$('tbody > tr:not(.collapse)').hide(); 

DEMO см демо

если вы хотите использовать CSS вы можете использовать тот же селектор

tbody > tr:not(.collapse){ 
    display: none; 
} 

Answer 2

Другой способ добиться того, что с помощью CSS (ИМХО более подходящее решение):

.collapse ~ tr{ 
    display: none; 
} 

это скрывает все .collapsetr , когда вы загружаете страницу. Событие click по-прежнему привязано к элементам .collapse и будет работать по щелчку.

Посмотрите here для рабочего примера

Если вам нужно придерживаться jQuery вы можете:

1) скрыть все .collapse тр братьев и сестер:

$(".collapse").siblings("tr").toggle(); //--- or hide() in your case 

2) инициируют щелчок событие на вашем .collapse элементов для их скрытия

$(".collapse").trigger("click");