php और MySQL का उपयोग करके टेबल अकॉर्डियन

मैं बूटस्ट्रैप का उपयोग करके इसे "हल" करने में कामयाब रहा
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>The web</title>
    <style>
        .hiddenRow {
            padding: 0 !important;
        }
    </style>
    <style>
        tr.accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

            tr.accordion.active, tr.accordion:hover {
                background-color: #ddd;
            }

            tr.accordion:after {
                content: '\002B';
                color: #777;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }

            tr.accordion.active:after {
                content: "\2212";
            }

        tr.panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>    
</head>
    <body>
    <?php
    include("info.php");
    $query = "SELECT * FROM list1 ORDER BY `FName` ASC"; 
    $result = mysql_query($query);
    ?>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>URL</th>
                <th>Age</th>
                <th>Address</th>
            </tr>
         </thead>
    <!-- populate table from mysql database -->
        <?php $i=0; while($row = mysql_fetch_assoc($result)) { $i++; ?>
        
        <tbody id="accordion" class="accordion-group">
            <tr data-toggle="collapse" data-target="#name_<?php echo $i;?>" class="accordion-toggle accordion">
                <td>
                    <?php echo $row['FName'];?>
                </td>
                <td>
                    <?php echo "<a href='http://".$row['URL']."'>".$row['URL']."</a>"?>

                </td>
                <td>
                    <?php echo $row['Age'];?>
                </td>
                <td>
                    <?php echo $row['Address'];?>
                </td>
            </tr>
            <tr class="panel">
                <td colspan="6" class="hiddenRow">
                    <div class="accordian-body collapse" id="name_<?php echo $i;?>">
                        <?php echo $row['Description'];?>
                    </div>
                </td>
            </tr>
        </tbody>
            <?php }?>
       
    </table>
    <script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var tr = this.nextElementSibling;
	  if (tr.style.maxHeight){
  	  tr.style.maxHeight = null;
    } else {
  	  tr.style.maxHeight = tr.scrollHeight + 'px';
    }
  }
}
    </script>
</body>