Trying to implement collapsible/expandable rows in a table using only HTML and CSS-CodePudding

I followed a tutorial that showed you how to make expandable/collapsible content and I was able to get it to work perfectly; however, I'm having some trouble adapting it to work in a table to where there are hidden rows that can be expanded. The idea is that you click on the video button, and a hidden row expands to show the embedded video. Right now it just won't expand the content even when the checkbox is checked. Here's a simplified version of my code:

<html>
    <head>
        <style>
            th {padding: 5px;
                border-bottom: 1px solid white; }
        </style>
        
        <style>
            table {
                width: 100%;
                border-left: none; 
                border-right: none; 
                border-collapse: collapse; }
        </style>

        <style type="text/css">
            .accordion > input[name="collapse"] {
                display:none; }
        </style>
        
        <style type="text/css">
            .accordion .content {
                background: rgba(105, 45, 118, 0.9);
                visibility:collapse; }
        </style>
    
        <style type="text/css">
            .accordion label {
                color: #fff;
                cursor: pointer;
                font-weight: normal;
                padding: 5px;
                width:auto; 
                display:block; }
        </style>
        
        <style type="text/css">
            .accordion label:hover,
            .accordion label:focus {
                background: #FFFFFF; 
                color: #000000; }
        </style>
        
        <style type="text/css">
            .accordion table tr > input[name="collapse"]:checked ~ .content {
                visibility:visible; }
        </style>
    </head>
    <body>
        <section >
            <table style="text-align:center">
                <tr style="background-color:rgba(105, 45, 118, 1)">
                    <th>Place</th>
                    <th>Player</th>
                    <th>Platform</th>
                    <th>Time</th>
                    <th>Video</th>
                </tr>
                
                <tr style="background-color:rgba(105, 45, 118, 1)">
                    <td>1</td>
                    <td>Me</td>
                    <td>EMU</td>
                    <td>8:50</td>
                    <td ><label for="handle1">Video</label></td>
                </tr>
                
                <tr>
                    <input type="checkbox" name="collapse" id="handle1"> 
                    <td colspan="5"  >
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/Yx21y2jcB9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </td>
                </tr>
            </table>
        </section>
    </body>
</html>

CodePudding user response：

I removed the excess style tags and analyzing the code I noticed that the input only inside the tag did not render in the html, so some changes had to be made in the html and css

I added and changed a few things but now it's working

<html>
    <head>
        <style>
            th {
              padding: 5px;
              border-bottom: 1px solid white; 
            }

            table {
                width: 100%;
                border-left: none; 
                border-right: none; 
                border-collapse: collapse; 
             }
                
            .accordion input[name="collapse"] {
                display:none; 
            }
            .accordion .content {
                background: rgba(105, 45, 118, 0.9);
               
            }
           .accordion .wrappervideo {
             display: none; 
           }
            .accordion label {
                color: #fff;
                cursor: pointer;
                font-weight: normal;
                padding: 5px;
                width:auto; 
                display:block; 
            }
            .accordion label:hover,
            .accordion label:focus {
                background: #FFFFFF; 
                color: #000000; 
            }
            .accordion input[name="collapse"]:checked ~ .wrappervideo {
                display: initial; 
            }
        </style>
    </head>
    <body>
        <section >
            <table style="text-align:center">
                <tr style="background-color:rgba(105, 45, 118, 1)">
                    <th>Place</th>
                    <th>Player</th>
                    <th>Platform</th>
                    <th>Time</th>
                    <th>Video</th>
                </tr>
                
                <tr style="background-color:rgba(105, 45, 118, 1)">
                    <td>1</td>
                    <td>Me</td>
                    <td>EMU</td>
                    <td>8:50</td>
                    <td ><label for="handle1">Video</label></td>
                </tr>
                
                <tr>
                    <td colspan="5" >
                     <input type="checkbox" name="collapse" id="handle1" />
                     <div >
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/Yx21y2jcB9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    
                    </td>
                </tr>
            </table>
        </section>
    </body>
</html>