De PHPhulp kroeg
<details ><summary> integratie
een overzicht dat te lang wordt wil ik met
Code (php)
1
<details ><summary>
uit/inklapbaar maken.
Wat is het geval ieder seizoen -een seizoen loopt overigens niet gelijk met aan kalenderjaar- komt er een clubblad uit. Er zijn seizoenen met iedere maand één clubblad en seizoenen met 52 clubbladen of soms maar 6 per seizoen.
wat is mijn doel.
Wat ik nu heb is een overzicht per seizoen :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[seizoen 2000-2001]<br>
clubblad september 2000<br>
clubblad oktober 2000<br>
clubblad november 2000<br>
.....<br>
.....<br>
clubblad juli 2001<br>
<br>
[seizoen 2001-2002]<br>
clubblad september 2001<br>
clubblad oktober 2001<br>
clubblad november 2001<br>
.....<br>
.....<br>
clubblad juli 2002<br>
clubblad september 2000<br>
clubblad oktober 2000<br>
clubblad november 2000<br>
.....<br>
.....<br>
clubblad juli 2001<br>
<br>
[seizoen 2001-2002]<br>
clubblad september 2001<br>
clubblad oktober 2001<br>
clubblad november 2001<br>
.....<br>
.....<br>
clubblad juli 2002<br>
Met dit script lukt het me om een overzicht te maken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$current_category='x';
while($record = mysqli_fetch_array($sql_clubblad))
{
if ($current_category != $record['seasonname'])
{
if ($current_category != 'x')
{
echo "<br/>";
}
echo'<h2> '.$record['seasonname'].'</h2>';
$current_category=$record['seasonname'];
}
echo'<a href='. $url.'.$record['permalink'].'" target="_blank">'.$record['clubbladtitel'].'</a></br>';
}
while($record = mysqli_fetch_array($sql_clubblad))
{
if ($current_category != $record['seasonname'])
{
if ($current_category != 'x')
{
echo "<br/>";
}
echo'<h2> '.$record['seasonname'].'</h2>';
$current_category=$record['seasonname'];
}
echo'<a href='. $url.'.$record['permalink'].'" target="_blank">'.$record['clubbladtitel'].'</a></br>';
}
Maar dat wordt erg lang.
nu heb ik een 'iets' gevonden wat de oplossing zou kunnen zijn
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
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
<div>
<style>
details.tree {
padding-left: 0em;
font-weight: bold;
color:yellow;
background : #004000
}
div.tree {
padding-left: 0em;
font-style: normal;
font-weight: bold;
color:yellow;
background : #006400
}
details.tree details.tree, details.tree div.tree {
font-weight: normal;
}
</style>
<details class="tree"><summary>seizoen naam</summary><br>
<div class="tree">clubblad september 2001</div><br>
<div class="tree">clubblad oktober 2001</div><br>
<div class="tree">clubblad november 2001</div><br>
.....<br>
</details><br>
</div>
<style>
details.tree {
padding-left: 0em;
font-weight: bold;
color:yellow;
background : #004000
}
div.tree {
padding-left: 0em;
font-style: normal;
font-weight: bold;
color:yellow;
background : #006400
}
details.tree details.tree, details.tree div.tree {
font-weight: normal;
}
</style>
<details class="tree"><summary>seizoen naam</summary><br>
<div class="tree">clubblad september 2001</div><br>
<div class="tree">clubblad oktober 2001</div><br>
<div class="tree">clubblad november 2001</div><br>
.....<br>
</details><br>
</div>
Maar helaas ik krijg het niet goed aan de praat.
Nu worden de seizoenen genest.
Wat moet ik doen om de clubbladen onder hun seizoensnaam gegroepeerd per seizoen per te kunnen in een uit klappen?
Ik denk dat het gaat op het uitklappen waarbij "iets" niet gaat zoals verwacht.
Waarschijnlijk wil je per seizoen uitklappen bij een klik op de naam?
Maar je toont maar 1 seizoen. Ik denk dat het probleem duidelijker zou worden als er meerdere seizoenen in het voorbeeld zouden staan.
Je moet in elk geval per uitklapper een <details>tag hebben.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details_css
Met de PHP code krijg ik een net overzicht van :
<code>
[seizoen 2000-2001]<br>
clubblad september 2000<br>
clubblad oktober 2000<br>
clubblad november 2000<br>
.....<br>
.....<br>
clubblad juli 2001<br>
<br>
[seizoen 2001-2002]<br>
clubblad september 2001<br>
clubblad oktober 2001<br>
clubblad november 2001<br>
.....<br>
.....<br>
clubblad juli 2002<br>
</code>
Als ik de <details ><summary>
Dan krijg ik niet voor ieder seizoen een "header" en de seizoen .
Dan komt er een genest overzicht.
<code>
[seizoen 2000-2001]<br>
-clubblad september 2000<br>
-clubblad oktober 2000<br>
-clubblad november 2000<br>
-.....<br>
-.....<br>
-clubblad juli 2001<br>
--[seizoen 2001-2002]<br>
--clubblad september 2001<br>
--clubblad oktober 2001<br>
--clubblad november 2001<br>
--.....<br>
--.....<br>
--clubblad juli 2002<br>
---[seizoen 2000-2001]<br>
---clubblad september 2000<br>
---clubblad oktober 2000<br>
---clubblad november 2000<br>
---.....<br>
---.....<br>
---clubblad juli 2001<br>
</code>
Na veel klooien krijg ik het niet voor elkaar dat ieder seizoen een header is met daar onder de clubbladen uit dat
seizoen.
zo iets dus:
<code>
-[seizoen 2000-2001]<br>
-clubblad september 2000<br>
-clubblad oktober 2000<br>
-clubblad november 2000<br>
-clubblad juli 2001<br>
+[seizoen 2001-2002]<br>
+[seizoen 2002-2003]<br>
</code>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
$current_category='x';
while($record = mysqli_fetch_array($sql_clubblad))
{
if ($current_category != $record['seasonname']) {
if ($current_category !== 'x') {
echo '</details>';
}
echo'<details class="tree"><summary>'. htmlspecialchars($record['seasonname']).'</summary>';
$current_category=$record['seasonname'];
}
echo'<div class="tree">'. htmlspecialchars($record['clubbladtitel']).'</div>';
}
if ($current_category !== 'x') {
echo '</details>';
}
?>
$current_category='x';
while($record = mysqli_fetch_array($sql_clubblad))
{
if ($current_category != $record['seasonname']) {
if ($current_category !== 'x') {
echo '</details>';
}
echo'<details class="tree"><summary>'. htmlspecialchars($record['seasonname']).'</summary>';
$current_category=$record['seasonname'];
}
echo'<div class="tree">'. htmlspecialchars($record['clubbladtitel']).'</div>';
}
if ($current_category !== 'x') {
echo '</details>';
}
?>
die <br>s heb ik achterwege gelaten: dat regel je maar met CSS....
En die linkjes komen wel als je opbouw van de pagina klopt.
Toevoeging op 04/01/2026 22:10:06:
en het lijkt me zekerder om htmlspecialchars toe te voegen voor het geval iemand bijvoorbeeld een & of < in de namen opneemt.
Dat gaat goed, zolang het niet fout gaat.
Bijvoorbeeld de introductie van het automerk Link&Co heeft tot problemen geleid, net als de Kia Cee'd een onhandige naam bleek te zijn.
pffff dat is hem!!!
Daar zat ik me nou echt blind op te staren :-|
Het werkt ik ga nu allen even stap voor stap er door heen lopen om te begrijpen waar ik de mist in ging
Hartstikke bedankt :-)
Dit kan wel met een beetje JavaScript die je onder de details zet.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
let details = document.querySelectorAll("details.tree");
for (let i = 0; i < details.length; i++) {
details[i].addEventListener("click", function() {
for (let detail of details) {
if (detail != this) detail.open = false;
}
});
}
</script>
let details = document.querySelectorAll("details.tree");
for (let i = 0; i < details.length; i++) {
details[i].addEventListener("click", function() {
for (let detail of details) {
if (detail != this) detail.open = false;
}
});
}
</script>