Hiding collapsible rows on page load

Question

I'd like to have the collapsible rows in this table load collapsed; currently, they load expanded and the toggle hides them.

Here is the 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;
    }

Here is the 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>

Here is the jQuery:

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

I've tried a bunch of jquery snippets, none have worked.

Answer 1

Refer to the jQuery documentation for .toggle()

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

"The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown."

So, you can easily change this by hiding the content in your CSS, so it's not displayed initially. Add this to your CSS:

.hide {
  display: none;
}