Zijnoten bij een artikel Nieuw

<!-- 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'));