HTML:

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
     </tbody>
</table>

Javascript/JQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#collapse');
    });
</script>

CSS:

<style type="text/css">
    #collapse tr{display:none;}
    #collapse tr:first-child{display:table-row;}

    /* or is there a prettier, better way to do this? */
</style>

How do I hide all children except the for the first child in Javascript/JQuery and CSS on page load?

So, it should actually just display:

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
     </tbody>
</table>

Note: I'd rather not add a CSS class to each child like .hide_child{display:none;}

HTML:

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
        <tr>
            <td>Text</td>
        </tr>
     </tbody>
</table>

Javascript/JQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#collapse');
    });
</script>

CSS:

<style type="text/css">
    #collapse tr{display:none;}
    #collapse tr:first-child{display:table-row;}

    /* or is there a prettier, better way to do this? */
</style>

How do I hide all children except the for the first child in Javascript/JQuery and CSS on page load?

So, it should actually just display:

<table id="collapse">
    <tbody>
        <tr>
            <th>Heading</th>
        </tr>
     </tbody>
</table>

Note: I'd rather not add a CSS class to each child like .hide_child{display:none;}

• javascript
• jquery
• css
• children

1 Answer 1

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#collapse tr').not(":first-child").hide();
    });
</script>

see: http://jsfiddle/FeVnt/