Revealing text in table cells when checked-CodePudding

To put in a nutshell, I need to do an html page with a checkbox and a table, where checkbox is responsible for revealing text in table cells. When tag is checked, hidden information must reveal in every cell. I've made a simple code without any other tags to see if this would work, but something goes wrong and .hidden text doesn't display. Here is it:

<head>
    <style>
        input[type=checkbox]:checked ~ .hidden {
        display:inline-block;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div ><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>

I need to do this code without JS Hope for your help

CodePudding user response：

Because .hidden is not located next to your checkbox, you have to refer the table first and then the .hidden element, which is a child of <table>.

<head>
    <style>
        input[type=checkbox]:checked ~ table div.hidden {
          display:inline-block !important;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div ><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>