Toggle table row visibility with checkbox

by lpugin

HTML

<table>
    <tbody>
        <tr><td>Row 1</td></tr>
    </tbody>

    <tbody>
        <tr><td>Row 2</td></tr>
    </tbody>
    
        <!-- Control tbody -->
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="toggle1" hidden>
                <label for="toggle1">Show More</label>
            </td>
        </tr>
    </tbody>

    <tbody class="more-content">
        <tr><td>Hidden Row A</td></tr>
    </tbody>

    <!-- Control tbody -->
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="toggle1" hidden>
                <label for="toggle1">Show More</label>
            </td>
        </tr>
    </tbody>

    <tbody class="more-content">
        <tr><td>Hidden Row A</td></tr>
    </tbody>
</table>

CSS

.more-content {
    display: none;
}

#toggle1:checked ~ .more-content {
    display: table-row-group;
}

#toggle1:checked + label {
    display: none;
}