How can I make a button that when clicked opens a table below it, and when clicked wraps up again? I want to do this in HTML5, CSS3, and JavaScript.

Answer 1

Here's a complete example:

HTML:

<button onClick="toggleTable()">Open Table</button>

<table id="myTable" style="width:50%" class="hidden">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

CSS:

.hidden {

display: none;

}

JS:

function toggleTable() {

document.getElementById("myTable").classList.toggle("hidden");

}

Clicking the button runs the toggleTable function. The function gets the classList for the table, and simply toggles the class "hidden" off, then on with each subsequent call.

Note that the table has the "hidden" class to start with.