get a hidden table to appear with with a click with php - php

Question

Im creating a simple School grade system using only php and I'm stumped of trying to figure out how to get a hidden table to appear below the main table when click on a "durchschnitt number"
Below is the code for the main table
<?php
if (!isset ($_SESSION['Saved_contacts']))
$Kontakte = array (
array ("Hr.", "Fruehauf", "Dennis", "13.02.2002", "Brucknerweg 34", 5212, "Hausen", '<u>3.6</u>'),
array ("Fr.", "Kaufmann", "Katharina", "04.03.2002", "Neubertbogen 24", 1680, "Romont", "Durchschnitt"),
array ("Hr.", "Fiedler", "Marcel", "08.16.2002", "Via Stazione 98", 8143, "Stallikon", "Durchschinitt"),
array ("Hr.", "Oster", "Tim", "08.26.2002", "Via delle Vigne 98", 1773, "Vuaty", "Durchschinitt"),
array ("Fr.", "Eichelberger", "Tanja", "07.22.2002", "Semperweg 6", 4223, "Blauen", "Durchschinitt"));
else
$Kontakte = $_SESSION['Saved_contacts'];
?>
<div style="width: 80%; min-width: 550px">
<h2>Kontakt des Schülers ...</h2>
<table>
<tr> <th>Nr.</th> <th>Anrede</th> <th>Name</th> <th>Vorname</th> <th>Geburtsdatum</th> <th>Adresse</th> <th>PLZ</th> <th>Ort</th> <th>Durchschnitt</th> </tr>
<?php
for ($i=0; $i < count($Kontakte); $i++) {
echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
"<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
"<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . " <td>".$Kontakte[$i][7]."</td
" . " <td><</tr>";
}
?>
</table>
As you can see in the first aray on the last line i made a link so that i'm able to click it.
Below is the hidden table I want to hide and reappear
<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6<th>
</tr>
</table>
<div>
</div>
Appreciate your help :)

Answer 1

If you want to use PHP only then you can use session, on clicking link set a session variable in a different file and redirect back, check that session variable and show/hide w.r.t it. (though JavaScript is preferable)

Answer 2

It's better to use javascript.
You just need to add the onlick attribute on the "durchschnitt number" td like
<td onclick="show('tableid');"></td>
and specify an id to the div or the table (es.: <table class="grade_Fruehauf" style="" id="example">.
Then you need a javascript code like this:
<script>
function show(tableid){
var x=document.getElementById(tableid);
if (window.getComputedStyle(x).visibility === "hidden") {
x.style.visibility = "visible";
}else{
x.style.visibility = "hidden";
}
}
</script>