spring naar de tekst
toolsside

Klikbare koptekst met Javascript

Voor een klant heb ik een Wordpress site gemaakt. Ik heb dit met Wordpress gedaan omdat hij de site dan zelf bij kan houden en technische kennis van HTML tot het minimale wordt beperkt. Je moet natuurlijk wel wat kennis hebben. Dingen als afbeeldingen en koppen worden immers niet vanzelf toegevoegd. Er staat veel tekst op deze site en om mensen te laten kiezen wat ze willen lezen hebben we er voor gekozen om gedeeltes van teksten te verbergen en met een klik zichtbaar te maken. Ik heb het in de blog klikbare koptekst al gehad over de toegankelijkheid hiervan en wil nu naar de technische kant kijken. Om het voor de beheerder van de site zo simpel mogelijk te houden heb ik ervoor gekozen om zo min mogelijk HTML te gebruik zodat het gemakkelijk is om dit op meerdere plekken in de site gebruiken. Je kunt volstaan met 3 tags. Een heading-tag (een h2 in dit geval), een article-tag en een div-tag. De h2 wordt klikbaar met Javascript en heeft geen class nodig. Deze h2 komt in een article-tag met de class hiddenText. In dit article komt er nog een div met de class showText, in deze div komt nu de tekst te staan die we uiteindelijk willen verbergen. De tekst in de article-tag is wel gewoon te lezen als de pagina eenmaal geladen is. Dit komt er dan zo uit te zien:

Voorbeeld van de HTML<article class="hidenText">
  <h2>Ik ben een kop</h2>
  <p>Hier staat tekst die zichtbaar is</p>
  <div class="showText">
    <p>Verborgen</p>
  </div>
</article>

De tekst gaan we verbergen met Javascript maar we maken een class aan waarin we de tekst verbergen allen zetten we deze class dynamisch met Javscript op de div. Als je het zo doe dan is de tekst ten allen tijde te lezen mocht Javascript niet werken. Dit wordt dan de CSS:

Voorbeeld CSS voor verborgen tekst.hide {
  position: absolute;
  left: -9999px;
}

Met Javascript plaatsen we deze tekst nu buiten beeld door op de div de class hide te zetten.

Voorbeeld Javascript codeconst hiddenText = document.querySelector('.hiddenText');
hiddenText.classList.add('hide');

Nu gaan we de h2 klikbaar maken:

Voorbeeld Javascript codeconst heading = document.querySelector('h2');
heading.addEventListener('click', () => {
  hiddenText.classList.contains('hide') ? 
  hiddenText.classList.remove('hide') : 
  hiddenText.classList.add('hide')
});

Als je nu naar de pagina kijkt dan is de tekst verborgen, als je op de koptekst klikt dan wordt tekst zichbaar, met een tweede klik verdwijnt de tekst weer. De kopt is nu nog steeds geen interactief element, je kunt de kop dus niet bereiken of activeren met het toetsenbord. Probeer maar eens met de TAB-toets. Dus wil ik een button (het is een actie dus een button) plaatsen in de h2-tag. Ik wil de tekst van de h2 tag gebruiken voor de tekst van de button.

Voorbeeld Javascript codeconst textHeading = heading.innerText;

const button = `
  <button class="button">
  ${textHeading}
  </button>
  `;

heading.innerHTML = button;

Voorbeeld CSS voor verborgen tekst.button {
   text-decoration: underline;
   cursor: pointer;
   border: none;
   background-color: transparent;
   font-size: 2rem;
   font-weight: bold;
 }

De kop is nu klikbaar en te bereiken activeren met het toetsenbord. Doet de Javascript het niet dan is het gewone kop en de tekst is zichtbaar. Dit is nu een toegankelijk verborgen tekst.Gepubliceerd op 2 april 2020 door Renee de Kruijf