NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Richtprijzen met tabs en niveaus Nieuw

Prijslijst voor een fietsenmaker, garage of salon: tabs per soort (stadsfiets, e-bike, race, kinderfiets) en kolommen Goed, Beter en Best, met artikelnummer en vaste prijzen over de hele rij. Tabs volgen het ARIA-patroon (pijltjes, Home, End), een zoekveld filtert de regels met een leeg-staat, en op mobiel kies je een niveau zodat de tabel niet horizontaal scrollt. Bedragen in euro met komma en tabulaire cijfers.

Rijwielhandel Van Leeuwen · Groningen

Richtprijzen werkplaats

Onderdelen en arbeid in een prijs. Klaar terwijl je wacht bij de meeste reparaties onder 30 minuten.

Goed
degelijk huismerk, prima voor dagelijks gebruik
Beter
A-merk, langer mee en lekbestendiger
Best
topmodel van het merk, voor veelrijders

Prijzen per 1 oktober 2026, inclusief btw. Afwijken doen we alleen na overleg.

Art.nrReparatieGoedBeterBest

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Richtprijzen met tabs en niveaus · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fpr">
  <div class="fpr__in">
    <div class="fpr__side">
      <p class="fpr__kick">Rijwielhandel Van Leeuwen · Groningen</p>
      <h2 class="fpr__h">Richtprijzen werkplaats</h2>
      <p class="fpr__lead">Onderdelen en arbeid in een prijs. Klaar terwijl je wacht bij de meeste reparaties onder 30 minuten.</p>
      <dl class="fpr__lv">
        <div><dt>Goed</dt><dd>degelijk huismerk, prima voor dagelijks gebruik</dd></div>
        <div><dt>Beter</dt><dd>A-merk, langer mee en lekbestendiger</dd></div>
        <div><dt>Best</dt><dd>topmodel van het merk, voor veelrijders</dd></div>
      </dl>
      <p class="fpr__note">Prijzen per 1 oktober 2026, inclusief btw. Afwijken doen we alleen na overleg.</p>
    </div>
    <div class="fpr__main">
      <div class="fpr__tabs" role="tablist" aria-label="Soort fiets">
        <button role="tab" id="fpr-t-stad" aria-controls="fpr-panel" aria-selected="true" data-k="stad">Stadsfiets</button>
        <button role="tab" id="fpr-t-ebike" aria-controls="fpr-panel" aria-selected="false" tabindex="-1" data-k="ebike">E-bike</button>
        <button role="tab" id="fpr-t-race" aria-controls="fpr-panel" aria-selected="false" tabindex="-1" data-k="race">Racefiets</button>
        <button role="tab" id="fpr-t-kind" aria-controls="fpr-panel" aria-selected="false" tabindex="-1" data-k="kind">Kinderfiets</button>
      </div>
      <div class="fpr__bar">
        <label class="fpr__search"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M13 13l4 4"/></svg><span class="fpr__sr">Zoek een reparatie</span><input type="search" placeholder="Zoek, bv. ketting of band"></label>
        <div class="fpr__lvsel" role="radiogroup" aria-label="Toon niveau"><label><input type="radio" name="fpr-lv" value="1" checked><span>Goed</span></label><label><input type="radio" name="fpr-lv" value="2"><span>Beter</span></label><label><input type="radio" name="fpr-lv" value="3"><span>Best</span></label></div>
      </div>
      <div id="fpr-panel" class="fpr__panel" role="tabpanel" aria-labelledby="fpr-t-stad" tabindex="0">
        <table class="fpr__t" data-lv="1"><thead><tr><th scope="col">Art.nr</th><th scope="col">Reparatie</th><th scope="col" class="fpr__c1">Goed</th><th scope="col" class="fpr__c2">Beter</th><th scope="col" class="fpr__c3">Best</th></tr></thead><tbody></tbody></table>
        <p class="fpr__empty" hidden></p>
      </div>
    </div>
  </div>
</div>
</div>

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →