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

Dienstenaccordeon met foto per dienst New

Services as an accordion: click a service and the matching photo swaps on the right, no scroll coupling. Built on native details with name (exclusive), ::details-content and interpolate-size: allow-keywords for a soft height animation; browsers without these open instantly and a small script closes the others. On mobile the photo sits inside the open panel.

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

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.
<!-- 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>

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 →