Stad Gent |

Stad Gent

Matches in Stad Gent for { <https://stad.gent/id/infopage/26171> ?p ?o ?g. }

Showing items 1 to 16 of 16 with 100 items per page.

26171 type Article infopages.
26171 subject "https://stad.gent/en/node/3020" infopages.
26171 description "Het Stedelijk Onderwijs Gent stelt haar schoollokalen ter beschikking aan verenigingen en derden. Start je aanvraag hier." infopages.
26171 identifier "26171" infopages.
26171 image zalenverhuur.jpg infopages.
26171 inLanguage "nl" infopages.
26171 keywords "onderwijs" infopages.
26171 keywords "scholen" infopages.
26171 keywords "zalen" infopages.
26171 name "Zaalverhuur schoollokalen" infopages.
26171 url zaalverhuur-schoollokalen infopages.
26171 dateModified "2026-07-08T11:56:50+00:00" infopages.
26171 datePublished "2019-04-18T13:24:32+00:00" infopages.
26171 articleBody " <div class="paragraph paragraph--type--table-of-contents paragraph--view-mode--full"> <nav class="table-of-contents" aria-labelledby="table-of-contents-header"> <div class="content-container"> <h4 id="table-of-contents-header">On this page</h4> <ul class="three-column"> <li><a href="/en/lod/infopages#start-je-aanvraag">Start je aanvraag</a></li> <li><a href="/en/lod/infopages#contact">Contact</a></li> <li><a href="/en/lod/infopages#veelgestelde-vragen">Veelgestelde vragen</a></li> </ul> </div> </nav> </div> <div class="paragraph paragraph--type--text paragraph--view-mode--full"> <p>Stad Gent stelt <a href="https://stad.gent/sites/default/files/media/documents/zalenlijst%202026%20zonder%20wijzigingen.pdf">bepaalde zalen</a> in <a href="https://stad.gent/onderwijs-kinderopvang/onderwijs/scholen">scholen van het Stedelijk Onderwijs</a> en kinderopvanginitiatieven ter beschikking van particulieren, feitelijke verenigingen en andere organisaties.</p><p>Voor het gebruik van die zalen gelden het <a href="https://stad.gent/nl/reglementen/algemeen-huishoudelijk-reglement-voor-het-gebruik-van-zalen-van-de-stad-gent">algemeen reglement</a> en het <a href="https://stad.gent/nl/reglementen/bijzonder-huishoudelijk-reglement-voor-het-gebruik-van-zalen-scholen-en-kinderopvanginitiatieven-van">bijzonder reglement</a> voor zalen in scholen en kinderopvang. Bekijk ook het <a href="https://stad.gent/nl/reglementen/retributiereglement-voor-het-beschikbaar-stellen-van-zalen">retributiereglement</a> voor de tarieven.</p><p class="messages messages--info">Zaalverhuur is gesloten tijdens de Gentse Feesten en in augustus.</p> </div> <div id="start-je-aanvraag" class="paragraph paragraph--type--anchor paragraph--view-mode--full"></div> <div class="paragraph paragraph--type--call-to-action paragraph--view-mode--full cta-block image-none download"> <div class="cta-block__content"> <div class="feature-block secondary"> <h2>Dien je aanvraag in</h2> <p>Mail het ingevulde formulier naar zalengebruik.onderwijs@stad.gent.</p> <ul class="links"> <li> <a href="https://stad.gent/sites/default/files/media/documents/Reserveren%20zaal%20SOG%20occasioneel.pdf" class="button button-secondary" download>Eenmalige reservatie</a> <span class="file-type">PDF <span class="file-size">(287.87 KB)</span></span> </li> <li> <a href="https://stad.gent/sites/default/files/media/documents/Reserveren%20zaal%20SOG%20repetitief.pdf" class="standalone-link" download>Terugkerende reservatie</a> <span class="file-type">PDF <span class="file-size">(317.8 KB)</span></span> </li> </ul> </div> </div> </div> <div class="paragraph paragraph--type--text paragraph--view-mode--full"> <h2><a class="ck-anchor" id="contact"></a>Contacteer ons</h2><ul><li><a href="mailto:zalengebruik.onderwijs@stad.gent">Stel je vraag via e-mail</a></li><li><a href="https://gent.mijnafspraakmaken.be/?product=1817">Maak een afspraak met zalenverhuur</a></li></ul> </div> <div id="veelgestelde-vragen" class="paragraph paragraph--type--anchor paragraph--view-mode--full"></div> <div class="paragraph paragraph--type--embed paragraph--view-mode--full"> <section class="content-wrapper"> <div class="embed-wrapper"> <!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Veelgestelde vragen – Gebruik schoollokalen Stedelijk Onderwijs Gent</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700;800&display=swap" rel="stylesheet" /> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #005ba9; --blue-light: #ccdeee; --cyan: #009de0; --cyan-light: #e6f8ff; --cyan-hover: #1abcff; --yellow: #ffdb5a; --gray: #001823; --gray-medium: #687278; --gray-light: #e6e8ea; --gray-ultra-light: #f0f1f2; --white: #ffffff; --red: #ea0d33; } body { font-family: 'Fira Sans', sans-serif; color: var(--gray); background: var(--white); font-size: 1rem; line-height: 1.6; } /* ── Container ── */ .faq-widget { max-width: 800px; margin: 0 auto; padding: 0 1rem 3rem; text-align: left; } /* ── Page header ── */ .faq-header { background: var(--blue); color: var(--white); padding: 2rem 1.5rem; margin-bottom: 2rem; } .faq-header h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; margin-bottom: .375rem; } .faq-header p { font-size: .9375rem; opacity: .85; } /* ── Search block ── */ .search-block { margin-bottom: 2rem; position: relative; } .search-block label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .5rem; color: var(--gray); } .search-wrapper { display: flex; align-items: center; border: 2px solid var(--gray-light); background: var(--white); transition: border-color .15s; } .search-wrapper:focus-within { border-color: var(--blue); } .search-icon { flex-shrink: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; color: var(--gray-medium); pointer-events: none; } .search-input { flex: 1; padding: .75rem .75rem .75rem 0; font-family: 'Fira Sans', sans-serif; font-size: 1rem; border: none; color: var(--gray); background: transparent; appearance: none; min-width: 0; } .search-input:focus { outline: none; } .clear-btn { flex-shrink: 0; width: 2.25rem; background: none; border: none; cursor: pointer; padding: .25rem; color: var(--gray-medium); display: none; align-items: center; justify-content: center; } .clear-btn:hover { color: var(--gray); } .search-block { margin-bottom: 2rem; position: relative; } /* ── Suggestions dropdown ── */ .suggestions-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--white); border: 2px solid var(--blue); border-top: none; z-index: 100; list-style: none; max-height: 320px; overflow-y: auto; display: none; } .suggestions-list.open { display: block; } .suggestions-list li button { display: block; width: 100%; text-align: left; padding: .75rem 1rem; font-family: 'Fira Sans', sans-serif; font-size: .9375rem; color: var(--gray); background: none; border: none; border-bottom: 1px solid var(--gray-light); cursor: pointer; line-height: 1.4; } .suggestions-list li:last-child button { border-bottom: none; } .suggestions-list li button:hover, .suggestions-list li button:focus { background: var(--cyan-light); color: var(--blue); outline: none; } .suggestions-list li button mark { background: var(--yellow); color: var(--gray); } .no-results-msg { padding: .75rem 1rem; color: var(--gray-medium); font-size: .9375rem; font-style: italic; } /* ── Category tabs ── */ .category-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .cat-btn { font-family: 'Fira Sans', sans-serif; font-size: .875rem; font-weight: 600; padding: .375rem .875rem; border: 2px solid var(--blue); background: var(--white); color: var(--blue); cursor: pointer; border-radius: 0; transition: background .15s, color .15s; } .cat-btn:hover { background: var(--blue-light); } .cat-btn.active { background: var(--blue); color: var(--white); } /* ── Result count ── */ .result-count { font-size: .875rem; color: var(--gray-medium); margin-bottom: 1rem; } .result-count strong { color: var(--gray); } /* ── FAQ accordion list ── */ .faq-list { list-style: none; } .faq-list > li { border: none; } /* Category label inside list */ .category-label { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--white); background: var(--cyan); padding: .125rem .5rem; margin-bottom: .25rem; } /* Accordion button — meervoudige variant, stad.gent v7 stijl */ .accordion--button { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--gray-light); padding: 20px 0; font-family: 'Fira Sans', sans-serif; font-size: 1rem; font-weight: 600; color: var(--gray); cursor: pointer; line-height: 1.4; gap: 0; } .faq-list > li:last-child .accordion--button { border-bottom: 1px solid var(--gray-light); } .faq-list > li:last-child .accordion-content.open { border-bottom: 1px solid var(--gray-light); } .accordion--button:hover { color: var(--blue); } .accordion--button:focus { outline: 2px solid var(--blue); outline-offset: 2px; } /* Lichtblauw vierkantje links met + / – icoon erin */ .accordion--button::before { content: ''; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0 15px 0 0; background-color: #7ed9ff; /* cyan-pastel */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cline x1='7' y1='1' x2='7' y2='13' stroke='%23001823' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='%23001823' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .accordion--button[aria-expanded="true"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='%23001823' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .accordion-content { display: none; padding: 0 0 1.25rem 0; font-size: .9375rem; color: var(--gray); line-height: 1.7; text-align: left !important; } .accordion-content.open { display: block; } .accordion-content p { margin-bottom: .75rem; } .accordion-content p:last-child { margin-bottom: 0; } .accordion-content ul, .accordion-content ol { padding-left: 1.25rem; margin-bottom: .75rem; } .accordion-content li { margin-bottom: .25rem; } .accordion-content strong { font-weight: 700; } /* ── Empty state ── */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--gray-medium); display: none; } .empty-state svg { margin-bottom: 1rem; opacity: .4; } .empty-state p { font-size: 1rem; } /* ── Highlight matched text ── */ mark { background: var(--yellow); padding: 0 .1em; } /* Responsive */ @media (max-width: 480px) { .faq-header h1 { font-size: 1.375rem; } .accordion-content { padding-left: 0; } } </style> </head> <body> <div class="faq-widget" role="main"> <h2>Veelgestelde vragen</h2>  <div class="search-block"> <label for="faq-search">Zoek een vraag</label> <div class="search-wrapper"> <div class="search-icon" aria-hidden="true"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/> </svg> </div> <input type="search" id="faq-search" class="search-input" placeholder="Typ een trefwoord of vraag" autocomplete="off" aria-autocomplete="list" aria-controls="suggestions" aria-expanded="false" /> <button class="clear-btn" id="clear-btn" aria-label="Zoekopdracht wissen" type="button"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/> </svg> </button> <ul class="suggestions-list" id="suggestions" role="listbox" aria-label="Zoeksuggesties"></ul> </div> </div>  <div class="category-tabs" role="group" aria-label="Filter op categorie"> <button class="cat-btn active" data-cat="all" type="button">Alle vragen</button> <button class="cat-btn" data-cat="Tarieven en kosten" type="button">Tarieven en kosten</button> <button class="cat-btn" data-cat="Aanvraag en annulatie" type="button">Aanvraag en annulatie</button> <button class="cat-btn" data-cat="Betaling" type="button">Betaling</button> <button class="cat-btn" data-cat="Tijdens je activiteit" type="button">Tijdens je activiteit</button> <button class="cat-btn" data-cat="Problemen" type="button">Problemen</button> <button class="cat-btn" data-cat="Aansprakelijkheid en verzekering" type="button">Aansprakelijkheid en verzekering</button> </div> <p class="result-count" id="result-count" aria-live="polite"></p>  <ul class="faq-list" id="faq-list" aria-label="Veelgestelde vragen"></ul>  <div class="empty-state" id="empty-state" aria-live="polite"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/> </svg> <p>Geen vragen gevonden voor jouw zoekopdracht.<br>Probeer een ander trefwoord of bekijk alle categorieën.</p> </div> </div> <script> const FAQ = [ // ── Tarieven en kosten ── { cat: "Tarieven en kosten", q: "Wat kost het gebruik van een schoollokaal?", a: `<p>Het tarief hangt af van het type activiteit, de duur van het gebruik (minstens 1 uur) en de locatie. De datum van je gebruik bepaalt welk tarief geldt. Tarieven worden jaarlijks geïndexeerd volgens de gezondheidsindex, dus het tarief kan wijzigen tussen twee aanvragen.</p> <p><strong>Basistarieven 2026 (per uur):</strong></p> <ul> <li>Sociaal-cultureel, erkende/betoelaagde verenigingen: <strong>€3,80</strong></li> <li>Andere activiteiten van erkende/betoelaagde verenigingen: <strong>€8,90</strong></li> <li>Sociaal-cultureel, andere aanvragers: <strong>€15,20</strong></li> <li>Andere activiteiten, andere aanvragers: <strong>€24,10</strong></li> </ul> <p>Bedragen zijn exclusief btw wanneer van toepassing. Bekijk het volledige <a href="https://stad.gent/nl/reglementen/retributiereglement-voor-het-beschikbaar-stellen-van-zalen" target="_blank" rel="noopener">retributiereglement</a> voor details en de indexatieformule.</p>` }, { cat: "Tarieven en kosten", q: "Hoe krijg ik een gunsttarief als erkende vereniging?", a: `<p>Bezorg een geldig bewijs van erkenning of betoelaging door Stad Gent.</p> <p>Een erkende of betoelaagde vereniging is een vereniging die structurele steun of erkenning krijgt van Stad Gent. Sommige organisaties worden hiermee gelijkgesteld, bijvoorbeeld via projectsubsidie of fiscale aftrekbaarheid.</p>` }, { cat: "Tarieven en kosten", q: "Mijn vereniging is niet officieel erkend, maar krijgt wel projectsubsidie. Kom ik toch in aanmerking voor het gunsttarief?", a: `<p>Ja. Organisaties die gelijkgesteld worden met een erkende vereniging — bijvoorbeeld via projectsubsidie of fiscale aftrekbaarheid — komen ook in aanmerking.</p>` }, // ── Aanvraag en annulatie ── { cat: "Aanvraag en annulatie", q: "Hoe lang op voorhand moet ik mijn aanvraag indienen?", a: `<p>Vraag je lokaal minstens <strong>6 weken op voorhand</strong> schriftelijk aan.</p>` }, { cat: "Aanvraag en annulatie", q: "Waarom moet ik 6 weken op voorhand aanvragen?", a: `<p>Meerdere diensten moeten je aanvraag technisch, praktisch en veiligheidsmatig goedkeuren. Dat proces vraagt tijd.</p>` }, { cat: "Aanvraag en annulatie", q: "Welke aanvragen krijgen voorrang als er meerdere kandidaten zijn voor dezelfde zaal?", a: `<p>Aanvragen worden in principe behandeld in volgorde van ontvangst. Schoolgerelateerde activiteiten krijgen wel altijd voorrang, ongeacht het moment van aanvragen.</p>` }, { cat: "Aanvraag en annulatie", q: "Hoe annuleer ik mijn aanvraag?", a: `<p>Annuleer via je contactpersoon van zalenverhuur.</p>` }, { cat: "Aanvraag en annulatie", q: "Wat kost een late annulatie?", a: `<p>Annuleer je minder dan 1 week voor je activiteit, dan kan de Stad kosten aanrekenen.</p>` }, { cat: "Aanvraag en annulatie", q: "Welke naam van mijn vereniging gebruik ik bij de aanvraag?", a: `<p>Gebruik altijd de actuele officiële naam van je vereniging. Dat is belangrijk voor de facturatie en de erkenning.</p>` }, // ── Betaling ── { cat: "Betaling", q: "Wanneer en hoe moet ik betalen?", a: `<p>Facturatie gebeurt vóór de activiteit. Betaal binnen 30 dagen na factuur, of uiterlijk 3 dagen vóór gebruik.</p> <p>Bij aanmaning worden <strong>€20</strong> administratiekosten aangerekend.</p>` }, { cat: "Betaling", q: "Wie betaalt de retributie?", a: `<p>De aanvrager betaalt, of de natuurlijke persoon die de aanvraag indient namens de vereniging.</p>` }, { cat: "Betaling", q: "Zijn er vrijstellingen van de retributie?", a: `<p>Ja. Sommige stedelijke diensten, schoolactiviteiten en brede-schoolwerkingen zijn vrijgesteld. Zie <a href="https://stad.gent/nl/reglementen/retributiereglement-voor-het-beschikbaar-stellen-van-zalen" target="_blank" rel="noopener">retributiereglement</a> voor de volledige lijst.</p>` }, // ── Tijdens je activiteit ── { cat: "Tijdens je activiteit", q: "Waarvoor ben ik verantwoordelijk tijdens mijn activiteit?", a: `<p>Je bent verantwoordelijk voor:</p> <ul> <li>Het naleven van veiligheids- en reglementaire verplichtingen</li> <li>Het respecteren van maximale capaciteit en evacuatieroutes</li> <li>Het rookverbod</li> <li>Zorgvuldig beheer van sleutels/badges</li> <li>Het vermijden van overlast en nutteloze alarmmeldingen</li> <li>Correcte opvolging bij incidenten of noodsituaties</li> </ul> <p>Lees het <a href="https://stad.gent/nl/reglementen/bijzonder-huishoudelijk-reglement-voor-het-gebruik-van-zalen-scholen-en-kinderopvanginitiatieven-van" target="_blank" rel="noopener">gebruiksreglement</a> voor volledige voorwaarden.</p>` }, { cat: "Tijdens je activiteit", q: "Wat zijn de gebruiksvoorwaarden van de zaal?", a: `<ul> <li>Gebruik de zaal enkel voor de goedgekeurde activiteit.</li> <li>Laat zaal en materiaal achter zoals ontvangen.</li> <li>Verwijder afval en eigen materialen onmiddellijk.</li> <li>Sluit de zaal correct af en breng sleutels tijdig terug.</li> <li>Gebruik van keukens, sportvloeren en bepaalde installaties kan verboden zijn.</li> </ul>` }, { cat: "Tijdens je activiteit", q: "Mag ik keukentoestellen gebruiken?", a: `<p>Dit is nooit toegestaan.</p>` }, { cat: "Tijdens je activiteit", q: "Welke activiteiten zijn niet toegelaten in een schoollokaal?", a: `<p>Onder andere:</p> <ul> <li>Politieke en syndicale activiteiten (met uitzonderingen)</li> <li>Gemotoriseerde snelheids- of behendigheidswedstrijden (bijv. motorfietsen, e-bikes, drones)</li> <li>Overnachtingen (behalve in bepaalde internaten)</li> </ul>` }, { cat: "Tijdens je activiteit", q: "Wie is de sleuteldrager?", a: `<p>Praktische info hierover wordt meegedeeld door de contactpersoon van zalenverhuur.</p>` }, // ── Aansprakelijkheid en verzekering ── { cat: "Aansprakelijkheid en verzekering", q: "Ben ik verzekerd tijdens mijn activiteit?", a: `<p>Stad Gent verzekert het gebouw. Jij moet als organisator <strong>zelf verzekerd zijn</strong> voor je activiteit.</p>` }, { cat: "Aansprakelijkheid en verzekering", q: "Wie is aansprakelijk voor schade?", a: `<p>Jij bent aansprakelijk voor schade die jij of je deelnemers veroorzaken tijdens je gebruik van de zaal.</p>` }, // ── Problemen ── { cat: "Problemen", q: "Wat doe ik bij een defect, schade of noodgeval tijdens mijn activiteit?", a: `<p>Bel onmiddellijk de wachtdienst van FM Onderwijs op <a href="tel:0926715800"><strong>09 267 15 80</strong></a>. Die lijn is 24/7 bereikbaar. Buiten de kantooruren word je automatisch doorgeschakeld naar G4S.</p>` }, { cat: "Problemen", q: "Wat als ik de zaal niet netjes achterlaat?", a: `<p>De Stad rekent in 2026 <strong>€63</strong> aan voor ambtshalve schoonmaak of afvalophaling. Dat bedrag is indexeerbaar.</p>` }, { cat: "Problemen", q: "Wat kost een loze alarmmelding?", a: `<p>Alle kosten van een loze alarmmelding worden aan jou doorgerekend.</p>` }, { cat: "Problemen", q: "Wat als ik mijn sleutel of badge verlies?", a: `<p>De kosten voor het vervangen van sloten en nieuwe toegangsdragers worden aan jou doorgerekend.</p>` }, { cat: "Problemen", q: "Wat als ik het reglement niet naleef?", a: `<p>De Stad kan je activiteit onmiddellijk stopzetten, een forfaitaire vergoeding van <strong>€250</strong> aanrekenen en je voor maximaal 2 jaar de toegang tot zalen weigeren.</p>` } ]; // ─── State ─────────────────────────────────────────────────────────────────── let activeCategory = "all"; let searchQuery = ""; // ─── DOM refs ───────────────────────────────────────────────────────────────── const input = document.getElementById("faq-search"); const clearBtn = document.getElementById("clear-btn"); const suggList = document.getElementById("suggestions"); const faqList = document.getElementById("faq-list"); const emptyState = document.getElementById("empty-state"); const countEl = document.getElementById("result-count"); const catBtns = document.querySelectorAll(".cat-btn"); // ─── Helpers ────────────────────────────────────────────────────────────────── function normalize(str) { return str.toLowerCase().replace(/['']/g, "'"); } function highlight(text, query) { if (!query) return text; const safe = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); return text.replace(new RegExp(`(${safe})`, "gi"), "<mark>$1</mark>"); } function getFiltered() { const q = normalize(searchQuery); return FAQ.filter(item => { const catMatch = activeCategory === "all" || item.cat === activeCategory; const termMatch = !q || normalize(item.q).includes(q) || normalize(item.a.replace(/<[^>]+>/g, "")).includes(q); return catMatch && termMatch; }); } // ─── Render FAQ list ───────────────────────────────────────────────────────── function renderList() { const items = getFiltered(); faqList.innerHTML = ""; if (items.length === 0) { emptyState.style.display = "block"; faqList.style.display = "none"; countEl.innerHTML = ""; return; } emptyState.style.display = "none"; faqList.style.display = "block"; const total = items.length; countEl.innerHTML = `<strong>${total}</strong> ${total === 1 ? "vraag" : "vragen"} gevonden`; items.forEach((item, idx) => { const id = `acc-${idx}`; const li = document.createElement("li"); const qText = searchQuery ? highlight(item.q, searchQuery) : item.q; li.innerHTML = ` <h3 style="font-size:inherit;font-weight:inherit;margin:0"> <button class="accordion--button" aria-expanded="false" aria-controls="${id}" type="button"> <span>${qText}</span> </button> </h3> <div class="accordion-content" id="${id}" role="region"> ${item.a} </div> `; faqList.appendChild(li); const btn = li.querySelector(".accordion--button"); const content = li.querySelector(".accordion-content"); btn.addEventListener("click", () => { const expanded = btn.getAttribute("aria-expanded") === "true"; btn.setAttribute("aria-expanded", String(!expanded)); content.classList.toggle("open", !expanded); }); }); // Auto-open if single result if (items.length === 1) { const btn = faqList.querySelector(".accordion--button"); const content = faqList.querySelector(".accordion-content"); if (btn && content) { btn.setAttribute("aria-expanded", "true"); content.classList.add("open"); } } } // ─── Suggestions dropdown ──────────────────────────────────────────────────── function showSuggestions(q) { if (!q || q.length < 2) { closeSuggestions(); return; } const norm = normalize(q); const matches = FAQ.filter(item => normalize(item.q).includes(norm)).slice(0, 6); suggList.innerHTML = ""; if (matches.length === 0) { const li = document.createElement("li"); li.innerHTML = `<span class="no-results-msg">Geen suggesties gevonden</span>`; suggList.appendChild(li); } else { matches.forEach(item => { const li = document.createElement("li"); const btn = document.createElement("button"); btn.setAttribute("type", "button"); btn.setAttribute("role", "option"); btn.innerHTML = highlight(item.q, q); btn.addEventListener("mousedown", (e) => { e.preventDefault(); selectSuggestion(item.q); }); li.appendChild(btn); suggList.appendChild(li); }); } suggList.classList.add("open"); input.setAttribute("aria-expanded", "true"); } function closeSuggestions() { suggList.classList.remove("open"); suggList.innerHTML = ""; input.setAttribute("aria-expanded", "false"); } function selectSuggestion(q) { input.value = q; searchQuery = q; clearBtn.style.display = "flex"; closeSuggestions(); renderList(); } // ─── Events ─────────────────────────────────────────────────────────────────── input.addEventListener("input", () => { searchQuery = input.value.trim(); clearBtn.style.display = searchQuery ? "flex" : "none"; showSuggestions(searchQuery); renderList(); }); input.addEventListener("keydown", (e) => { if (e.key === "Escape") { closeSuggestions(); input.blur(); } if (e.key === "Enter") { closeSuggestions(); } }); input.addEventListener("blur", () => { setTimeout(closeSuggestions, 150); }); clearBtn.addEventListener("click", () => { input.value = ""; searchQuery = ""; clearBtn.style.display = "none"; closeSuggestions(); input.focus(); renderList(); }); catBtns.forEach(btn => { btn.addEventListener("click", () => { catBtns.forEach(b => b.classList.remove("active")); btn.classList.add("active"); activeCategory = btn.dataset.cat; closeSuggestions(); renderList(); }); }); // ─── Init ───────────────────────────────────────────────────────────────────── renderList(); </script> </body> </html> </div> </section> </div> " infopages.
26171 page 26171 infopages.
26171 articleSection "Cultuur & vrije tijd" infopages.