Tabbladen zonder JavaScript

Kan dat?

Moet een website altijd werken, ook wanneer JavaScript uitgeschakeld is? Of mag je van een gebruiker verlangen dat deze zelf zorgt dat het aanstaat? Eens of oneens, developer Andy Man zoekt uit of je een tabbladenfunctionaliteit kunt maken zonder JavaScript.

In oktober was ik met een aantal andere developers van Connect Holland bij het Fronteers congres in Amsterdam. Één van de grootste congressen voor front-end developing in Europa. Twee presentaties gingen over Progressive Enhancement en Graceful Degradation. Beide presentaties zijn te zien op vimeo.

Radiobutton hack

Ire vond dat een website altijd zou moeten werken, ook wanneer JavaScript is uitgeschakeld. Nolan vertelde het tegenovergestelde. Hij vond dat anno 2016 je van een gebruiker mag verlangen dat hij/zij JavaScript aan heeft staan om de website goed te kunnen gebruiken. In dit artikel ga ik niet in of ik het daar mee eens of oneens ben. Ik ga kijken of het mogelijk is om een tabbladenfunctionaliteit te maken zónder JavaScript.

Ik ga gebruik maken van de zogeheten "radiobutton hack". De term "hack" klinkt misschien raar. Maar het is omdat ik de radiobutton op een andere manier gebruik, dan waar het eigenlijk voor bedoeld is.

Het principe is eenvoudig. Wanneer er op een radiobutton wordt geklikt, wordt de bijbehorende tekst getoond.

Showdown

Hieronder de tabbladen zonder gebruik van JavaScript.

Laten we beginnen!

De HTML-structuur die we gaan gebruiken:

<input type="radio" name="tabs" id="thor" checked />
<input type="radio" name="tabs" id="hulk" />
….

<div class="tabs">
  <label for="captainamerica" class="tab">Captain America</label>
  <label for="hulk" class="tab">Hulk</label>
  ….
</div>

<div class="tabsContents">
  <div class="tabsContents__content">
    <h2>Thor</h2>
    <p>....</p>
  </div>
  <div class="tabsContents__content">
    <h2>Captain America</h2>
    <p>.....</p>
  </div>
  ….
</div>

Ik ga hieronder kort in op de werking van de tabbladen. Allereerst geven we aan wat het maximaal aantal tabbladen op de pagina moet worden. Meestal zullen dit er 5 à 8 zijn.

$numTabs: 5; //max number of tabs

Nu volgt het stuk “‘where the magic happens". De standaard radiobutton wordt verborgen, zodat alleen het label zichtbaar is. Wanneer het label wordt aangeklikt, zal de gelinkte radiobutton automatisch worden aangevinkt, waarna de desbetreffende content zichtbaar wordt. Om de content zichtbaar te maken, maken we gebruik van een SASS-loop.

/* tabs */
input[type="radio"] {
  position: absolute;
  display: none;
  
  @for $i from 1 through $numTabs {
    &:nth-child(#{$i}):checked ~ {
      .tabsContents .tabsContents__content:nth-child(#{$i}) {
        display: block;
      }
    }
  }
}

Hieronder zie je een voorbeeld wat het uiteindelijk kan worden met wat uitgebreide styling.

En onthoud, onderstaand voorbeeld is puur opgebouwd uit HTML en CSS.

Wat hebben we geleerd?

Het maken van een tabbladenfunctionaliteit met alleen CSS en HTML is dus zeker mogelijk. Alleen zijn er dus wel hacks nodig om het voor elkaar te krijgen. Maar het is een mooie manier om zonder JavaScript een interactieve functionaliteit zoals tabbladen te maken.

Daarnaast is dit eenvoudiger te implementeren in een bestaande website.

Waarom zou je het gebruiken?

  • Het is snel te maken;

  • Het is toegankelijk voor screenreaders;

  • Brede browserondersteuning: IE 9+, Chrome 13+, Firefox 3.6+, Opera 10+ en Safari 5.1+.

En waarom niet?

  • Je gebruikt een functionaliteit die daarvoor eigenlijk niet bedoeld is;

  • Geen standaard ondersteuning voor IE8;

  • Omdat voor meer geavanceerde functionaliteiten toch JavaScript nodig is.