We Keep Coding

Expand/Collapse All Button for Table with accordion rows

I have created a table with accordion rows. I also have a button on the top to expand all accordions and collapse them again.
The accordions open and close individually perfectly, as well as when using the expand/collapse all button, they all expand and collapse perfectly. The problem comes in once I've used the expand/collapse all button I am unable to open individual accordions.
Only once the page is refreshed I am able to open them individually until I use the expand/collapse all button.
Any help would be appreciated.
I troubleshoot and debugged as much as possible and asked multiple people for assistance, but have been unsuccessful.
HTML:
<table class="fold-table">
<tbody>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your strategic units and business units in a multi-level hierarchy</p>
</div>
</td>
</tr>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your processes and business </p>
</div>
</td>
</tr>
</tbody>
</table>
jQuery:
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
function expandCollapse() {
if ($(".fold").css('display') == 'none') {
$("#expand-collapse").html("Collapse All");
$(".fold").show("slow");
} else {
$("#expand-collapse").html("Expand All");
$(".fold").hide("slow");
}
}
Front end preview

You can see the live demo with arrows working http://jsfiddle.net/dreambold/q0tfp4yd/7/
Here's the working code.
$(function () {
$(".fold-table tr.view").on("click", function () {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$("#expand-collapse").on("click", function () {
if ($(this).html() == "Expand All") {
$(".fold-table tr.view, .fold").addClass("open");
$(this).html("Collapse All");
} else {
$(".fold-table tr.view, .fold").removeClass("open");
$(this).html("Expand All");
}
});
.licensing-options-page-content h1 {
font-weight: bolder;
text-transform: uppercase;
margin: 0% 0% 3% 0%;
}
.licensing-options-page-content {
margin-top: 12%;
}
#media (min-width: 1920px) and (max-width: 2560px) {
.licensing-options-page-content {
margin-top: 8%;
}
}
/* Main Tabs */
.main-tabs-lo {
background-color: #f2f2f7;
color: black;
display: inline-block;
cursor: pointer;
padding: 10px;
font-size: 15px;
font-weight: 700;
width: 26%;
margin-bottom: 10px;
}
#media (min-width: 1920px) and (max-width: 2560px) {
.main-tabs-lo {
font-size: 21px;
width: 20%;
}
}
.top-tabs-lo {
margin-bottom: 30px;
}
.top-tabs-lo .main-tabs-lo {
color: #030700;
text-align: center;
background-color: #f2f2f7;
text-transform: uppercase;
margin-right: -4px;
border-right: 1px solid darkgray;
}
.tab-radio {
display: none;
}
/* Tabs behaviour, hidden if not checked/clicked */
.tab-content {
display: none;
}
.tab-radio:checked + .tab-content,
.tab-radio:checked + .sub-tab-content {
display: block;
}
.top-tabs-lo .loactive,
.label:hover {
background-color: black;
color: white;
}
/* Tabs Content */
.tab-content-lo {
padding: 0px;
}
.tab-content-lo,
.tab-content-container-lo h4 {
color: white;
}
/*.tab-content-container-lo {
/*width: calc(60% - (.5em + 6px));
min-height: 400px;
}*/
.licensing-options-content {
justify-content: center;
align-content: center;
margin-top: 5%;
}
/* Table + Accordion */
.mol:after {
content: " g/mol";
}
.cur:before {
content: "$";
}
.per:after {
content: "%";
}
* {
box-sizing: border-box;
}
table {
width: 100%;
background: #f2f2f7;
}
.tab-content-container-lo table {
margin: 0;
}
.tab-content-container-lo .tab-content {
padding: 0;
}
.tab-content-container-lo td {
border: none;
}
.tab-content-container-lo table th {
text-align: left;
border: none;
background-color: #000;
color: white;
}
table th,
table td {
padding: 0.4em;
}
/*.licensing-options-page-content table td {
background-color: #F2F2F7;
}*/
table.fold-table > tbody > tr.view td,
table.fold-table > tbody > tr.view th {
cursor: pointer;
}
table.fold-table > tbody > tr.view td:first-child,
table.fold-table > tbody > tr.view th:first-child {
position: relative;
padding-left: 20px;
font-family: "Montserrat", sans-serif;
}
table.fold-table > tbody > tr.view td:first-child:before,
table.fold-table > tbody > tr.view th:first-child:before {
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 16px;
margin-top: -8px;
font: 16px fontawesome;
color: #999;
content: "\f0d7";
transition: all 0.3s ease;
}
table.fold-table > tbody > tr.view.open td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 16px;
margin-top: -8px;
font: 16px fontawesome;
color: #999;
content: "\f0da";
transition: all 0.3s ease;
}
.fold-table h3 {
color: white;
margin: 0;
}
table.fold-table > tbody > tr.view:nth-child(4n-1) {
background: #e2e2e2;
}
table.fold-table > tbody > tr.view. td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
transform: rotate(-180deg);
color: #333;
}
table.fold-table > tbody > tr.fold {
display: none;
}
table.fold-table > tbody > tr.fold.open {
display: table-row;
}
.fold-content {
padding: 0.5em;
}
.fold-content h3 {
margin-top: 0;
}
.fold-content > table {
border: 2px solid #ccc;
}
.fold-content > table > tbody tr:nth-child(even) {
background: green !important;
}
.view img {
margin-left: 36%;
}
.lic-btn {
cursor: pointer;
background-color: #000;
color: white;
padding: 10px;
width: 12%;
text-align: center;
margin-bottom: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table class="fold-table">
<tbody>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your strategic units and business units in a multi-level hierarchy</p>
</div>
</td>
</tr>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your processes and business </p>
</div>
</td>
</tr>
</tbody>
</table>
<button id="expand-collapse">Expand All</button>

How to add animation to filter table

I have made a filter table using html css and java but not able to add animation to it. I want that on entering the search element the results should be shown after hitting enter and it should be animated... in my condition the search result are shown directly....
here is my code
CSS code
* {
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 5px solid #ddd;
margin-bottom: 12px;
border-radius:20px;
}
#myTable {
border-collapse: collapse;
table-align: center;
width: 80%;
border: 5px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
Java script code
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
filter = filter.replace(/\s/g,'')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
} }
}
}
html code
<html>
<head>
<link href="css/filter-table.css" rel="stylesheet">
<link href="css/hdr-ftr.css" rel="stylesheet">
</head>
<body class="body-wrapper">
<center>
<center><font size="200"><b>Filter table</b></font> <br><br> <br>
<i class="fa fa-search searchIcon"></i>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search your product here">
</center>
<table id="myTable" align="center" border="5" width>
<tr class="header">
<th style="width:40%;">Column 1</th>
<th style="width:60%;">Column 2</th>
</tr>
<tr>
<td><center>
<br><b>India</b></a></center></td>
<td><br>
<dl>
<li>Search 1</li>
</dl> <br>
</td>
</tr>
<tr>
<td><center>
<br><b>America</b></a></center></td>
<td><br>
<dl>
<li>Search 2</li>
</dl> <br><br><br>
</td>
</tr>
<tr>
<td><center>
<br><b>Iran</b></a></center></td>
<td><br>
<dl>
<li>Search 3</li>
</dl> <br><br><br>
</td>
</tr>
</table>
<!--filter-table.js-->
<script src="js/filter-table.js"></script>
</body>
</html>
pls someone help me...
thanks in advance

Sorry for rewriting from scratch, feel free to ask any questions
const input = document.querySelector(`input[name="search"]`);
input.onkeyup = () => {
const search = input.value.toLowerCase();
const list = document.querySelectorAll(`section > article`);
list.forEach((article) => {
const title = article.querySelector(`div:first-child`).innerText.toLowerCase();
if (title.includes(search)) {
article.classList.remove(`hide`);
} else {
article.classList.add(`hide`);
}
});
};
main {
display: flex;
flex-direction: column;
align-items: center;
}
main>input {
width: 90%;
padding: 1vh;
margin-bottom: 2vh;
font-size: 3vh;
}
main>div {
display: grid;
place-items: center;
width: 100%;
height: 90%;
}
section {
border: 1px solid #000;
font-size: 2em;
width: 90%;
}
section>article {
display: flex;
border: 1px solid #000;
transition: all .2s;
height: 4vh;
font-size: 3vh;
}
section>article.hide {
height: 0;
border: none;
overflow: hidden;
}
section>article>div {
display: flex;
border: 1px solid #000;
width: 50%;
justify-content: space-evenly;
}
<body>
<main>
<input type="text" name="search" placeholder="Search.." />
<div>
<section>
<article>
<div>India</div>
<div>s1</div>
</article>
<article>
<div>America</div>
<div>s2</div>
</article>
<article>
<div>Iran</div>
<div>s3</div>
</article>
</section>
</div>
</main>
</body>

Blend in tr::before number with table?

I have got a HTML table built like this:
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table.sortable, tbody {
counter-reset: sortabletablescope;
vertical-align: middle;
}
table.sortable, thead tr::before {
content: "";
display: table-cell;
vertical-align: middle;
}
table.sortable, tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
vertical-align: middle;
text-align: center;
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1990<br>data1</td><td>data2</td></tr>
<td>2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I am trying to move the list number so it looks like its part of the table, and not printed before, so there is no whitespace before "Name" in the table header. Like how it looks here (here the numbers are added manually):
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1. 1990<br>data1</td><td>data2</td></tr>
<td>2. 2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I have managed to get the number where I want it by using
position: relative; bottom: -6px;
position: relative; left: +25px;
But that doesn't remove the whitespaces before "Name" in the table header. Is this possible to change?

You can use a CSS counter indeed via the :before pseudo-element style like a table-cell: (but there got to be one on each row to preserve the right amount of columns)
Sizing the pseudo-element will allow you to set a negative text-indent on the first th to align it to the far left
example
/* pseudo tr:before for CSS COUNTER for table tr */
tr:before {
content: '';
display: table-cell;
vertical-align: middle;
}
thead th:first-child {
text-indent: -1.5em;
}
tbody {
counter-reset: trs
}
tbody tr:before {
counter-increment: trs;
content: counter(trs)'. ';
width: 1.5em;
text-align: right;
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Mind the structure of your table to have no surprise once rendered by browsers.
if it needs to be inside the first cell, then set the counter to the first td and let it float
/* pseudo tr:before for CSS COUNTER for table tr */
tbody {
counter-reset: trs
}
tbody td:first-child:before {
counter-increment: trs;
content: counter(trs)'. ';
float:left
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>

Not able to place the table at center using align parameter

I have a table which will be loaded dynamically using jquery. I have give align parameter as center. But its aligned left. Please help me
<title></title>
<style>
.tb1 { background-color : #EEE8AA; color: black; font-size: 13pt; onfocus="this.value=" font:verdana}
.inp { border: 0; color: black; font-size: 13pt; onfocus="this.value=" font:verdana }
/* button styles */
.button0 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; display: inline-block; border-color: #ff0000; }
.button1 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block; border-color: black;}
.button2 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block; border-color: black;}
/* web page layout styles */
html, body { margin: 0;}
div { height: 30%; background-color: white; float: left;}
#left { width:33%; margin-top:20px }
#center { width:33%; margin-top:20px }
#right { width:33%; margin-top:20px }
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 300px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
</style>
</head>
<body>
<div id="left">
GRn: <input type="text" id="grn" class="tb1" placeholder="Provide your input" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br>
Unit: <input type="text" list="combo-options" id="unit" class="tb1">
<datalist id="combo-options">
<option value="UNIT 1">UNIT 1</option>
<option value="UNIT 2">UNIT 2</option>
</datalist><br><br>
<input type="button" id="find" value="Find" class="button0"/><br><br>
</div>
<div id="center">
PO no: <input type="text" id="pono" readonly="readonly" class="inp"/><br><br>
PO Date: <input type="text" id="podt" readonly="readonly" class="inp"/><br><br>
V.Inv.No <input type="text" name="vinvno" readonly="readonly" id="vinvno" class="inp"/><br><br>
V.Inv.Date <input type="text" name="vinvdt" readonly="readonly" id="vinvdt" class="inp"/><br><br>
</div>
<div id="right">
IRno: <input type="text" name="irepno" id="irepno" class="inp" /><br><br>
Creation Date <input type="date" name="cdate" id="cdate" class="inp" value="<%= new SimpleDateFormat("dd-MM-yyyy").format(new java.util.Date())%>"><br><br>
Type<select name="evalu" id="evalu">
<option value="electrical">Electrical</option>
<option value="mechanical">Mechanical</option>
</select>
</div>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
<div id="inspdiv">
</div>
</body>
</html>
</html>

That is due to width:100%; in table.Remove that it works just fine.
JSFIDDLE
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
EDIT:
Remove float:left from div in CSS.That is causing problem.Instead use display:inline-block

/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: left; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
Remove width: 100%; from table and it will be aligned to the center.

Just add text-align: center; to th and td in CSS.
/* table-itemtable styles */
table { border-collapse: collapse; width: 100%;}
th, td { text-align: left; padding: 8px; text-align:center;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>

Why does my jQuery slidedown not work in my table?

I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Bestuur</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>
<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>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretaris</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>

I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td width="200">
<div id="flip">Pieter Schreurs</div>
<div id="panel">Hidden information</div>
</td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.
I changed implementation so that "Functie" doesn't move.
Demo
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 150px;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr id="flip">
<td>Pieter Schreurs<div id="panel">Hidden information</div></td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>