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

Tabs met tijdbalk die vanzelf doorschakelen Nieuw

Vier diensten van een garage (APK, onderhoud, banden, airco) als tabs die elke 7 seconden doorschakelen; onder de actieve tab loopt een tijdbalk vol (CSS-keyframe op scaleX, animationend schakelt door). Hover of focus pauzeert, er is een zichtbare pauzeknop (WCAG 2.2.2), buiten beeld stopt hij, en bij prefers-reduced-motion schakelt hij niet vanzelf. ARIA-tabs met pijltjestoetsen. Het APK-paneel heeft een kentekenveld in NL-geel dat zelf streepjes zet, met fout- en succesmelding.

Autobedrijf Kuipers · Enschede · Bovag

Een werkplaats voor alle merken, met vaste prijzen

Auto op de remmentestbank tijdens een APK-keuring

APK-keuring, ook als je erop wacht

Afgekeurd op iets kleins? Dan repareren we het meteen, met je akkoord vooraf. Je krijgt een herinnering 6 weken voor je APK verloopt.

Duur
40 min
Prijs
€ 39
Herkeuring
gratis

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.
<!-- Tabs met tijdbalk die vanzelf doorschakelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gtb">
  <div class="gtb__in">
    <div class="gtb__head">
      <div><p class="gtb__kick">Autobedrijf Kuipers · Enschede · Bovag</p><h2 class="gtb__h">Een werkplaats voor alle merken, met vaste prijzen</h2></div>
      <button class="gtb__pause" type="button" data-paused="false"><svg class="gtb__ic-pause" viewBox="0 0 20 20" aria-hidden="true"><path d="M7 4.5v11M13 4.5v11"/></svg><svg class="gtb__ic-play" viewBox="0 0 20 20" aria-hidden="true"><path d="M6.5 4.5l9 5.5-9 5.5z"/></svg><span>Pauzeer</span></button>
    </div>
    <div class="gtb__box">
      <div class="gtb__tabs" role="tablist" aria-label="Diensten werkplaats">
        <button role="tab" id="gtb-t1" aria-controls="gtb-p1" aria-selected="true"><b>APK</b><span>vanaf € 39</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t2" aria-controls="gtb-p2" aria-selected="false" tabindex="-1"><b>Onderhoud</b><span>volgens fabrieksvoorschrift</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t3" aria-controls="gtb-p3" aria-selected="false" tabindex="-1"><b>Banden</b><span>wissel en opslag</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t4" aria-controls="gtb-p4" aria-selected="false" tabindex="-1"><b>Airco</b><span>check en vullen</span><i class="gtb__prog" aria-hidden="true"></i></button>
      </div>
      <div class="gtb__panels">
        <div class="gtb__p" id="gtb-p1" role="tabpanel" aria-labelledby="gtb-t1" tabindex="0">
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-4.webp" alt="Auto op de remmentestbank tijdens een APK-keuring" loading="lazy">
          <div class="gtb__c"><h3>APK-keuring, ook als je erop wacht</h3><p>Afgekeurd op iets kleins? Dan repareren we het meteen, met je akkoord vooraf. Je krijgt een herinnering 6 weken voor je APK verloopt.</p>
            <dl class="gtb__spec"><div><dt>Duur</dt><dd>40 min</dd></div><div><dt>Prijs</dt><dd>€ 39</dd></div><div><dt>Herkeuring</dt><dd>gratis</dd></div></dl>
            <form class="gtb__kf" novalidate><label class="gtb__kl" for="gtb-k">Je kenteken</label><div class="gtb__kr"><span class="gtb__plate"><span class="gtb__nl" aria-hidden="true">NL</span><input id="gtb-k" maxlength="8" placeholder="AB-123-C" autocomplete="off" spellcheck="false" aria-describedby="gtb-km"></span><button type="submit">Plan APK</button></div><p class="gtb__km" id="gtb-km" aria-live="polite"></p></form></div>
        </div>
        <div class="gtb__p" id="gtb-p2" role="tabpanel" aria-labelledby="gtb-t2" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-1.webp" alt="Auto op de brug in de werkplaats" loading="lazy">
          <div class="gtb__c"><h3>Onderhoud zonder dat je fabrieksgarantie vervalt</h3><p>We werken met originele of gelijkwaardige onderdelen en stempelen je digitale onderhoudsboekje. Leenauto of e-bike staat klaar.</p>
            <dl class="gtb__spec"><div><dt>Kleine beurt</dt><dd>vanaf € 189</dd></div><div><dt>Grote beurt</dt><dd>vanaf € 349</dd></div><div><dt>Leenauto</dt><dd>gratis</dd></div></dl><a class="gtb__cta" href="#">Bereken prijs op kenteken</a></div>
        </div>
        <div class="gtb__p" id="gtb-p3" role="tabpanel" aria-labelledby="gtb-t3" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-2.webp" alt="Monteur meet de profieldiepte van een band" loading="lazy">
          <div class="gtb__c"><h3>Winterbanden erop voor 1 november?</h3><p>We meten je profiel en bewaren je zomerset gewassen en op spanning. Onder 3 mm profiel adviseren we vervangen, met een prijs vooraf.</p>
            <dl class="gtb__spec"><div><dt>Wisselen</dt><dd>€ 49</dd></div><div><dt>Opslag</dt><dd>€ 39 p/j</dd></div><div><dt>Klaar in</dt><dd>30 min</dd></div></dl><a class="gtb__cta" href="#">Plan bandenwissel</a></div>
        </div>
        <div class="gtb__p" id="gtb-p4" role="tabpanel" aria-labelledby="gtb-t4" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-3.webp" alt="Airco-servicemachine aangesloten onder de motorkap" loading="lazy">
          <div class="gtb__c"><h3>Airco koelt niet meer of ruikt muf</h3><p>We controleren op lekkage, vullen bij en desinfecteren het systeem. Advies: elke twee jaar, het koelmiddel loopt langzaam weg.</p>
            <dl class="gtb__spec"><div><dt>Check en vullen</dt><dd>€ 99</dd></div><div><dt>Desinfectie</dt><dd>€ 29</dd></div><div><dt>Duur</dt><dd>1 uur</dd></div></dl><a class="gtb__cta" href="#">Plan aircoservice</a></div>
        </div>
      </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 →