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

Dienstenaccordeon met foto per dienst Nieuw

Behandelingen of diensten als accordeon: klik op een dienst en rechts wisselt de bijbehorende foto, zonder scroll-koppeling. Gebouwd op native details met name (er staat er altijd een open), ::details-content en interpolate-size: allow-keywords voor een zachte hoogte-animatie; browsers zonder die features openen direct en een klein script sluit de andere. Op mobiel staat de foto in het geopende paneel zelf.

Huidpraktijk Noor · Amstelveen

Behandelingen

Elke behandeling begint met een huidanalyse. Je krijgt vooraf een behandelplan met prijs, zonder verplichting.

01Hydraterende gezichtsbehandeling60 min · € 85

Reinigen, peeling met enzymen en een masker met hyaluronzuur. Voor een droge of trekkerige huid, vooral in de herfst en winter.

  • Resultaat direct zichtbaar
  • Geschikt bij een gevoelige huid
Boek deze behandeling
02Laserontharingvanaf € 59

Met een diodelaser, geschikt voor de meeste huidtypen. Gemiddeld 6 tot 8 behandelingen, met 6 weken ertussen.

  • Proefplek gratis bij de intake
  • Uitgevoerd door een BIG-geregistreerd verpleegkundige
Boek een intake
03Huidanalyse en behandelplan30 min · € 35

Met een loeplamp en huidscanner kijken we naar vocht, talg, pigment en rimpels. Je krijgt het plan mee op papier.

  • Bedrag wordt verrekend als je een behandeling boekt
Plan een analyse
04Thuisverzorging op maatadvies gratis

Drie producten voor 's ochtends en 's avonds, afgestemd op je analyse. Niet goed voor je huid? Binnen 30 dagen omruilen.

Bekijk de producten
Schoonheidsspecialist brengt een masker aan bij een cliënt Laserontharing op een onderarm Huidanalyse met een loeplamp Flesjes huidverzorging op een plank

01 / 04

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.
<!-- Dienstenaccordeon met foto per dienst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hfa">
  <div class="hfa__in">
    <div class="hfa__l">
      <p class="hfa__kick">Huidpraktijk Noor · Amstelveen</p>
      <h2 class="hfa__h">Behandelingen</h2>
      <p class="hfa__lead">Elke behandeling begint met een huidanalyse. Je krijgt vooraf een behandelplan met prijs, zonder verplichting.</p>
      <div class="hfa__acc">
        <details class="hfa__d" name="hfa-beh" open data-i="1"><summary><span class="hfa__n">01</span><span class="hfa__st">Hydraterende gezichtsbehandeling</span><span class="hfa__pr">60 min · € 85</span><span class="hfa__pl" aria-hidden="true"></span></summary>
          <div class="hfa__body"><img class="hfa__mimg" src="https://neddev.com/lab-media/feature-accordeon-beeld-1.webp" alt="" loading="lazy"><p>Reinigen, peeling met enzymen en een masker met hyaluronzuur. Voor een droge of trekkerige huid, vooral in de herfst en winter.</p><ul><li>Resultaat direct zichtbaar</li><li>Geschikt bij een gevoelige huid</li></ul><a class="hfa__a" href="#">Boek deze behandeling</a></div></details>
        <details class="hfa__d" name="hfa-beh" data-i="2"><summary><span class="hfa__n">02</span><span class="hfa__st">Laserontharing</span><span class="hfa__pr">vanaf € 59</span><span class="hfa__pl" aria-hidden="true"></span></summary>
          <div class="hfa__body"><img class="hfa__mimg" src="https://neddev.com/lab-media/feature-accordeon-beeld-2.webp" alt="" loading="lazy"><p>Met een diodelaser, geschikt voor de meeste huidtypen. Gemiddeld 6 tot 8 behandelingen, met 6 weken ertussen.</p><ul><li>Proefplek gratis bij de intake</li><li>Uitgevoerd door een BIG-geregistreerd verpleegkundige</li></ul><a class="hfa__a" href="#">Boek een intake</a></div></details>
        <details class="hfa__d" name="hfa-beh" data-i="3"><summary><span class="hfa__n">03</span><span class="hfa__st">Huidanalyse en behandelplan</span><span class="hfa__pr">30 min · € 35</span><span class="hfa__pl" aria-hidden="true"></span></summary>
          <div class="hfa__body"><img class="hfa__mimg" src="https://neddev.com/lab-media/feature-accordeon-beeld-3.webp" alt="" loading="lazy"><p>Met een loeplamp en huidscanner kijken we naar vocht, talg, pigment en rimpels. Je krijgt het plan mee op papier.</p><ul><li>Bedrag wordt verrekend als je een behandeling boekt</li></ul><a class="hfa__a" href="#">Plan een analyse</a></div></details>
        <details class="hfa__d" name="hfa-beh" data-i="4"><summary><span class="hfa__n">04</span><span class="hfa__st">Thuisverzorging op maat</span><span class="hfa__pr">advies gratis</span><span class="hfa__pl" aria-hidden="true"></span></summary>
          <div class="hfa__body"><img class="hfa__mimg" src="https://neddev.com/lab-media/feature-accordeon-beeld-4.webp" alt="" loading="lazy"><p>Drie producten voor 's ochtends en 's avonds, afgestemd op je analyse. Niet goed voor je huid? Binnen 30 dagen omruilen.</p><a class="hfa__a" href="#">Bekijk de producten</a></div></details>
      </div>
    </div>
    <div class="hfa__r">
      <img class="hfa__fig is-on" data-i="1" src="https://neddev.com/lab-media/feature-accordeon-beeld-1.webp" alt="Schoonheidsspecialist brengt een masker aan bij een cliënt" loading="lazy">
      <img class="hfa__fig" data-i="2" src="https://neddev.com/lab-media/feature-accordeon-beeld-2.webp" alt="Laserontharing op een onderarm" loading="lazy">
      <img class="hfa__fig" data-i="3" src="https://neddev.com/lab-media/feature-accordeon-beeld-3.webp" alt="Huidanalyse met een loeplamp" loading="lazy">
      <img class="hfa__fig" data-i="4" src="https://neddev.com/lab-media/feature-accordeon-beeld-4.webp" alt="Flesjes huidverzorging op een plank" loading="lazy">
      <p class="hfa__cap"><span class="hfa__cap-n">01</span> / 04</p>
    </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 →