My slider is not working when I include a table on my website. The slider works fine without a table, but I need to display members in a table format. Can anyone help me identify the issue with my code? The information needs to be displayed below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Board Members</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<!-- CSS Styles -->
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
</style>
</head>
<!-- Navigation Menu -->
<ul class="horizontal gray">
<li><a class="active" href="index.php">Board Members</a></li>
<li><a href="boardMembersEdit.php">Edit Board Members</a></li>
<li><a href="addBoardMember.php">Add Board Member</a></li>
</ul>
<!-- Table for Displaying Members -->
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretary</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Treasurer</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Chairman</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>