Скрытие разборных строк при загрузке страницы

Question

Я хотел бы, чтобы складные ряды в этой таблице рухнули; в настоящее время они загружаются расширенными, а переключатель скрывает их.

Вот CSS:

.header { 
    text-align: center; 
    font-size: 24pt; 
    width: 90%; 
} 
table { 
    width: 80%; 
    border-collapse: collapse; 
    margin:50px auto; 
    background-color: white; 
    align: center; 
    margin-top:-15px; 
    } 

th { 
    background: #605757; 
    color: white; 
    font-weight: bold; 
    } 

td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px; 
    } 

.labels tr td { 
    font-weight: bold; 
    color: #fff; 
} 

.label tr td label { 
    display: block; 
}t-weight: bold; 
     color: #fff; 
    } 

    .label tr td label { 
     display: block; 
    } 


    [data-toggle="toggle"] { 
     display: none; 
    } 

Вот HTML:

<table> 
    <thead> 
     <tr> 
      <th>Region</th> 
      <th>XML</th> 
      <th>URL for Converter</th> 
      <th>API Refresh</th> 
      <th>Live</th> 
     </tr> 
    </thead> 
<tbody class="hide"> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
      </tr> 
     </tbody>  
     <tbody class="labels"> 
      <tr> 
       <td colspan="5"> 
        <label for="washingtonarea">Washington;</label> 
        <input type="checkbox" name="washingtonarea" id="washingtonarea" data-toggle="toggle"> 
       </td> 
      </tr> 
     </tbody> 

Вот JQuery:

$(document).ready(function() { 
    $('[data-toggle="toggle"]').change(function(){ 
     $(this).parents().next('.hide').toggle(); 
    }); 
}); 

Я пробовал кучу фрагментов jquery, никто не работал.

Answer 1

Обратитесь к документации JQuery для .toggle()

http://api.jquery.com/toggle/

«совпавшие элементы будут выявлены или скрыты сразу, без анимации, изменяя свойства отображения CSS. Если сначала отображается элемент , он будет скрыт, а если скрыт, то будет показано ».

Таким образом, вы можете легко изменить это, спрятав содержимое в CSS, чтобы оно не отображалось первоначально. Добавьте это в CSS:

.hide { 
    display: none; 
}