<div class=“menu-bar”>

  <a href="#" data-menu="sumsonite" onclick="showSubmenu('sumsonite')">Sumsonite</a>
  <a href="#" data-menu="kengetallenboek" onclick="showSubmenu('kengetallenboek')">Kengetallenboek</a>
  <a href="#" data-menu="spacematrix" onclick="showSubmenu('spacematrix')">Spacematrix</a>

</div>

<div id=“sumsonite” class=“submenu”>

  <a href="[[handleiding_nieuw:sumsonite:toelichting]]">Toelichting</a>
  <a href="[[handleiding_nieuw:sumsonite:dashboards]]">Dashboards</a>
  <a href="[[handleiding_nieuw:sumsonite:exceltemplates]]">Exceltemplates</a>
  <a href="[[handleiding_nieuw:sumsonite:ai]]">AI (toekomst)</a>

</div>

<div id=“kengetallenboek” class=“submenu”>

  <a href="[[handleiding_nieuw:kengetallenboek:wijkbuurt]]">Wijk/Buurt</a>
  <a href="[[handleiding_nieuw:kengetallenboek:woonstraten]]">Woonstraten</a>
  <a href="[[handleiding_nieuw:kengetallenboek:pleinen]]">Pleinen</a>
  <a href="[[handleiding_nieuw:kengetallenboek:parken]]">Parken</a>
  <a href="[[handleiding_nieuw:kengetallenboek:winkelstraten]]">Winkelstraten</a>
  <a href="[[handleiding_nieuw:kengetallenboek:watergangen]]">Watergangen</a>
  <a href="[[handleiding_nieuw:kengetallenboek:elementen]]">Elementen</a>

</div>

<div id=“spacematrix” class=“submenu”>

  <a href="[[handleiding_nieuw:spacematrix:voorbeelden]]">Voorbeelden</a>
  <a href="[[handleiding_nieuw:spacematrix:stedelijke_dichtheden]]">Stedelijke dichtheden</a>

</div>

<script>

  function showSubmenu(menuId) {
      var submenus = document.querySelectorAll('.submenu');
      submenus.forEach(sub => sub.style.display = 'none');

      var selectedMenu = document.getElementById(menuId);
      if (selectedMenu) {
          selectedMenu.style.display = 'block';
      }

      document.querySelectorAll('.menu-bar a').forEach(a => a.classList.remove('active'));
      document.querySelector('.menu-bar a[data-menu="' + menuId + '"]').classList.add('active');
  }

</script>