как сделать так, чтобы таблица выпадала при клике с помощью JavaScript

Question

При использовании <p> мой скрипт работает. Когда я заменяю это таблицей, она не хочет следовать правилам моего сценария. Стол должен выпадать под кнопкой при нажатии.

Я использую php для получения информации из базы данных, но это не должно мешать, поскольку данные правильно отображаются в таблице. Я попытался положить таблицу в div. Я пробовал разные виды style.height / style.display в javascript.

это работает правильно

        <h1 type="button" class="stelling">Where  the sun?

        </h1>
    </div>
    <div id="p1" class="data">
        Here comes the sun!
    </div>

но когда я пытаюсь поставить таблицу в

<div class="stellingen";>
    <div type="button" id="btn1" class="stelling-wrapper">
        <img src="images/button.svg" alt="Show more..." class="btn" id="bton">
        <p type="button" class="stelling">
    </div>
<?php
    $sql2="SELECT * FROM stellingen WHERE stelling_ID=1;";
    $records2 =  mysqli_query($con, $sql2);
    $recordscheck2 = mysqli_num_rows($records2);

    if ($recordscheck2 > 0){
        while ($stellingen = mysqli_fetch_assoc($records2)){
            echo "<p>".@$stellingen['Stelling']."</p>";
        }
    }
?>

Здесь я использую тот же идентификатор, так же, как в примере, который работал, я также пытался с таблицей id = p1

<div id="p1">
    <table id="tabel" class="data">
    <tr>
        <th>Title</th>
        <th>Source</th>
        <th>Weight</th>
        <th>Date</th>
    </tr>

<?php
$sql1="SELECT * FROM stelling WHERE stelling_iD=1;";
$records1 =  mysqli_query($con, $sql1);
$recordscheck = mysqli_num_rows($records1);

if ($recordscheck > 0){
    while ($stelling = mysqli_fetch_assoc($records1)){
        echo "<tr>";
            echo "<td>".@$stelling['Title']."</td>";
            echo "<td>".@$stelling['Source']."</td>";
            echo "<td>".@$stelling['Wheight']."</td>";
            echo "<td>".@$stelling['Date']."</td>";
        echo "</tr>";
    }
}
?>
    </table>
</div>
</div>
</div>

JavaScript

<script>
window.onload = function() {
    var a = false;

    document.getElementById('btn1').onclick = function (){
        if(a== false){
            document.getElementById('p1').style.height = "auto";
            a =true;
        }else{
            document.getElementById('p1').style.height = "0px";
            a =false;
        }
    }
}
</script>

Я ожидаю, что div с моим столом выпадет при нажатии на кнопку