NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Richtprijzen met tabs en niveaus New

Price list for a bike shop, garage or salon: tabs per type (city bike, e-bike, racing, kids) and Good, Better, Best columns, with item codes and fixed prices spanning the row. Tabs follow the ARIA pattern (arrows, Home, End), a search field filters rows with an empty state, and on mobile you pick one level so the table never scrolls sideways. Euro amounts with comma and tabular figures.

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

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →