Ausblenden von faltbaren Zeilen beim Laden der Seite

Question

Ich möchte die zusammenklappbaren Zeilen in dieser Tabelle minimiert haben. Derzeit werden sie geladen und der Schalter blendet sie aus. Hier

ist die 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; 
    } 

Hier ist der 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> 

Hier ist die jQuery:

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

Ich habe eine Menge JQuery-Snippets ausprobiert, keiner hat funktioniert.

Answer 1

auf die jQuery-Dokumentation, für .toggle()

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

„Die abgestimmte Elemente werden sofort aufgedeckt oder ausgeblendet werden, ohne Animation, durch die CSS-Eigenschaft display ändern. Wenn das Element anfänglich angezeigt wird es wird versteckt sein, wenn es versteckt ist, wird es gezeigt. "

So können Sie dies leicht ändern, indem Sie den Inhalt in Ihrem CSS ausblenden, so dass es zunächst nicht angezeigt wird. Fügen Sie diese auf Ihrem CSS:

.hide { 
    display: none; 
}