Onclick show TR
Ik heb een tabel... Die tabel kan onbeperkt aantal aan evenementen hebben. Er is een "klik hier voor meer info" knop. Wanneer je daarop klikt, moet de TR eronder zichtbaar worden. Hoe doe ik dat? Mijn tabel ziet er zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
<tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
<tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
<tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
<tr>
<td>Event naam</td>
<td>Datum</td>
<td>Locatie</td>
<td>Leeftijd</td>
<td>Info</td>
</tr>
<tr style="display:none;">
<td colspan="5">Meer informatie over een event</td>
</tr>
$(this).next().toggle();
});
Zoiets kan het zijn ;-) Wel ff een trigger class toevoegen aan de tr die de functie moet hebben.
En geen inline CSS gebruiken, werk dan met klasses of javascript....
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
var triggerElems = document.querySelectorAll('tr.trigger');
[].forEach.call(triggerElems, function (triggerElem) {
triggerElem.onclick = function (e) {
var nextElem = this.nextElementSibling;
if ('block' === document.getComputedStyle(nextelem).getPropertyValue('display')) {
nextElem.style.display = 'none';
} else {
nextElem.style.display = 'block';
}
};
});
[].forEach.call(triggerElems, function (triggerElem) {
triggerElem.onclick = function (e) {
var nextElem = this.nextElementSibling;
if ('block' === document.getComputedStyle(nextelem).getPropertyValue('display')) {
nextElem.style.display = 'none';
} else {
nextElem.style.display = 'block';
}
};
});