Zijnoten bij een artikel New

Footnotes placed beside the text instead of at the bottom: click or tab to a number and the matching note lights up, and vice versa. In a narrow column the note slides in below the paragraph. For legal explainers, knowledge bases and articles with sources; numbers are buttons with aria-expanded.

Mag uw werkgever een proeftijd afspreken?

Ja, maar hooguit twee maanden bij een vast contract en alleen als het schriftelijk is vastgelegd. Bij een tijdelijk contract van zes maanden of korter mag er geen proeftijd in staan.

1Art. 7:652 lid 4 BW. Bij een contract van twee jaar of langer is het ook twee maanden.
2Art. 7:652 lid 2 BW. Een mondelinge afspraak telt niet.

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Zijnoten bij een artikel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zjn"><div class="zjn__in">
  <div class="zjn__tekst">
    <h3 class="zjn__h">Mag uw werkgever een proeftijd afspreken?</h3>
    <p class="zjn__p">Ja, maar hooguit twee maanden bij een vast contract<button class="zjn__ref" type="button" aria-expanded="false" aria-controls="zjn-n1" aria-label="Noot 1">1</button> en alleen als het schriftelijk is vastgelegd<button class="zjn__ref" type="button" aria-expanded="false" aria-controls="zjn-n2" aria-label="Noot 2">2</button>. Bij een tijdelijk contract van zes maanden of korter mag er geen proeftijd in staan.</p>
  </div>
  <ol class="zjn__noten" aria-label="Noten">
    <li class="zjn__noot" id="zjn-n1"><span class="zjn__nr">1</span>Art. 7:652 lid 4 BW. Bij een contract van twee jaar of langer is het ook twee maanden.</li>
    <li class="zjn__noot" id="zjn-n2"><span class="zjn__nr">2</span>Art. 7:652 lid 2 BW. Een mondelinge afspraak telt niet.</li>
  </ol>
</div></div>
</div>

/* Zijnoten bij een artikel · NedDev · eigen werk. */
.zjn{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:#fff}
.zjn__in{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:16px;align-items:center;padding:14px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left;overflow:hidden}
.zjn__h{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.25}
.zjn__p{margin:0;font-size:13px;line-height:1.6;color:#2b2b2b}
.zjn__ref{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin:-6px -5px -6px -3px;padding:5px;background-clip:content-box;vertical-align:super;border:0;border-radius:8px;background-color:transparent;color:#b83a0b;font:700 11px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.zjn__ref:hover,.zjn__ref.is-aan{background-color:#F5480F;color:#0a0a0a}
.zjn__ref:focus-visible{outline:2px solid #0a0a0a;outline-offset:1px}
.zjn__noten{margin:0;padding:0 0 0 12px;list-style:none;border-left:1px solid rgba(10,10,10,.14);display:flex;flex-direction:column;gap:10px;align-self:center}
.zjn__noot{position:relative;font-size:12px;line-height:1.4;color:#5b5b5b;transition:color .2s}
.zjn__noot::before{content:'';position:absolute;left:-13px;top:0;bottom:0;width:2px;background:#F5480F;transform:scaleY(0);transition:transform .25s ease}
.zjn__nr{display:inline-block;margin-right:5px;font-weight:700;color:#b83a0b}
.zjn__noot.is-aan{color:#0a0a0a}
.zjn__noot.is-aan::before{transform:none}
@container (max-width:380px){
  .zjn__in{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
  .zjn__noten{padding-left:10px;min-height:34px}
  .zjn__noot{display:none}
  .zjn__noot.is-aan{display:block}
  .zjn__noten:not(:has(.is-aan))::after{content:'Tik op een nummer voor de bron.';font-size:12px;color:#5b5b5b}
}
@media (prefers-reduced-motion:reduce){.zjn__ref,.zjn__noot,.zjn__noot::before{transition:none}}

// Zijnoten bij een artikel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.zjn'); if (!w) return;
    const refs = [...w.querySelectorAll('.zjn__ref')];
    let vast = null;
    const toon = id => {
      refs.forEach(r => { const aan = r.getAttribute('aria-controls') === id; r.classList.toggle('is-aan', aan); r.setAttribute('aria-expanded', String(aan)); });
      w.querySelectorAll('.zjn__noot').forEach(n => n.classList.toggle('is-aan', n.id === id));
    };
    refs.forEach(r => {
      const id = r.getAttribute('aria-controls');
      r.addEventListener('click', () => { vast = vast === id ? null : id; toon(vast); });
      r.addEventListener('mouseenter', () => toon(id));
      r.addEventListener('mouseleave', () => toon(vast));
      r.addEventListener('focus', () => toon(id));
      r.addEventListener('blur', () => toon(vast));
    });
    w.querySelectorAll('.zjn__noot').forEach(n => {
      n.addEventListener('mouseenter', () => toon(n.id));
      n.addEventListener('mouseleave', () => toon(vast));
    });
}
init(document.querySelector('.jouw-container'));

More text animations

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 →