Knoppen met drie standen

Hierboven zie je drie knoppen. Als je er op klikt verschijnt de bijbehorende content in een klein vensterje. Als je op de content klikt verdwijnt die weer.
Er is ook een hover-effect: de kleur van de knop verandert als de muis er overheen gaat.

De knoppen hebben drie mogelijke standen:
• Inactief. De knop is een ruit, groen van kleur met een plus-teken er in. De bijbehorende content is niet zichtbaar.
• Actief. De knop is een vierkant, blauw van kleur met een kruisje er in. De bijbehorende content is zichtbaar.
• Actief. De knop is een vierkant, blauw van kleur met een kruisje er in. De bijbehorende content is niet zichtbaar.

Op deze pagina wordt uitgelegd hoe je zoiets maakt.

De inspiratie komt uit Webdesigner Magazine nr. 90 (oktober 2016), pag. 22 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze website heb ik het voorbeeld verfraaid en er een paar dingen bijgebouwd.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• Het script bestaat uit HTML, CSS en JavaScript.
   
• HTML
• De HTML5-structuur is hier van belang. Er zijn twee blokken HTML waarmee dit effect wordt gemaakt: De knoppen en de bijbehorende content.
• De knoppen:
  
  • De knoppen worden bij elkaar gehouden door een wrapper. Dat is een <div-tag met de klasse wrapper. Dit zorgt er ook voor dat de knoppen netjes gecentreerd op het scherm staan.
  • Elk van de knoppen staat binnen een eigen wrapper. Dat is een <div-tag met de klasse wrapped (let op de spelling). Dit is nodig om de drie knoppen naast elkaar te krijgen.
    N.B.: Als je maar één knop nodig hebt kun je de wrapped weglaten.
  • De knoppen zelf zijn <a>-tags met klasse icon en een uniek id. De href verwijst naar id. Daardoor wordt de CSS getriggerd om de knoppen te laten draaien.
  • De knoppen worden aanklikbaar gemaakt met onclick.
  • De <a>-tags hebben geen link-tekst. Het +-teken wordt erin gezet door de CSS.
• De content:
  
  • De content staat in <article>-tags. Bij elke knop behoort een article, elk met een uniek id. Zo heeft de eerste knop het id="content1; het article met de content heeft id="c1. De middelste knop heeft content2 en c2, de derde knop heeft content3 en c3. De koppeling verloopt via JavaScript
  • Elk article bevat een <div>-tag, zonder attributen. Daarbinnen zijn alle HTML-elementen mogelijk, dus ook tabellen en plaatjes. Opmaak daarvan loopt via de CSS.
  • In het voorbeeld is alleen gebruik gemaakt van <h1> en <p>. Bij de eerste knop zie je één paragraaf tekst. Bij de tweede zijn dat er twee. Bij de laatste zijn er drie tekst-paragrafen.
• Code met deze aanpak kun je ergens in een webdocument zetten, zoals op deze pagina. Je kunt het ook gebruiken als opmaak voor een één-pagina site.
   
• CSS
• De klasse .wrapper zorgt voor de positionering van de knoppen op het scherm. Als je maar één knop wilt gebruiken, kun je dit weglaten. De eigenschappen voor de plaatsing zet je dan in .wrapped (Let op de spelling).
• In de klasse .wrapped staan de afmetingen en de marges van de knoppen. Door display: inline-block staan de knoppen naast elkaar.
   
• De animatie van de content wordt geregeld in de CSS voor article. Behalve de duur van de animatie (hier: 0.5 sec) hoeft er niet aan gewijzigd te worden.
• De opmaak van de content gebeurt in article div. Voeg zo nodig je eigen klassen en/of idents toe.
   
• De knoppen hebben de klasse .icon. Ze worden gemaakt door een blokje van (in het voorbeeld: 1.4em × 1.4 em) over -45° te draaien.
• Het plus-teken is een vermenigvuldigingsteken dat met de knop over -45° wordt gedraaid. Het is het HTML-karakter &times;. Het wordt in de knop gezet door .icon:before. Daar wordt de numerieke (hexadecimale) tegenhanger van &times; voor gebruikt ("\00d7"), want CSS kan niet overweg met HTML-karakter-entiteiten.
   
• Als je met de muis over een knop in de ruststand gaat wordt die rood van kleur. Dat gebeurt door .icon:hover.
• Als je op een knop klikt, draait die terug naar nul. De knop kleurt blauw. Dat gebeurt door .icon:target.
• Als je met de muis over een ingedrukte (verdraaide) knop gaat wordt die paars van kleur. Dat gebeurt door .icon:target:hover.
   
• Als je de knoppen groter of kleiner wilt maken doe je dat in .wrapped en .icon. Houd de width en height in .icon gelijk aan de helft van de width en height in .wrapped. Dan loopt de content niet door de knoppen heen.
• De grootte van het +-teken stel je in in .icon.
   
• JavaScript
• Door op een knop te klikken wordt de function toggleContent('x') geactiveerd. Deze function maakt eerst alle content die in een <article> staat, onzichtbaar. Dat gebeurt door een aanroep van removeContent().
• Daarna wordt de content met id="x" zichtbaar gemaakt. In het voorbeeld gebeurt dat door de height op 9.2em te zetten. De animatie wordt geregeld door CSS.
• Als je op de content klikt, wordt removeContent() aangeroepen. Die zet van alle <article>-tags de height op nul. CSS verzorgt de animatie.
• removeContent() gebruikt document.querySelectorAll("article"). Dit levert een array op van alle <article>-tags. In een loop over deze array wordt van elk article het id bepaald, waarvan de height gelijk wordt gemaakt aan nul.
   
• Toepassen in eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is weergegeven.
• Voeg zoveel knoppen en article's toe als je nodig hebt. Houd jezelf aan twee eenvoudige regels:
  
  • Elke knop met id="contentx" verwijst naar href="#contentx"
  • Bij elke knop met id="contentx" hoort een article met id="cx"
  • Er wordt geteld vanaf 1; er mogen geen gaten in de nummering zitten.
• Als je de knoppen groter maakt, moet je ook de height van wrapper en wrapped verhogen. Anders wordt de inhoud van het article voor een deel onder de knoppen geplaatst.
• Zorg ervoor dat de content van tenminste één van de article's in het content venster past. Dat wekt de indruk dat er goed over is nagedacht …
• Het is mogelijk om de instelling van height (hier: 9.2em), te vervangen door initial. Daardoor komt het article in een keer in beeld. Om voor mij onduidelijke reden werkt de animatie dan niet meer.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script>
function removeContent() {
  var xx = document.querySelectorAll("article");
  for (var i=0; i<xx.length; i++){ // verberg de articles
    str = "c" + (i + 1);
    document.getElementById(str).style.height = 0;
  }
}
function toggleContent(contNo) {
  removeContent();
  // toon het article   document.getElementById(contNo).style.height = "9.2em";
}
</script>

(Zet dit boven in de <BODY>).

<div class="wrapper">
  <div class="wrapped">
    <a id="content1" class="icon" href="#content1"
        onclick="toggleContent('c1')"></a>
  </div>
  <div class="wrapped">
    <a id="content2" class="icon" href="#content2"
        onclick="toggleContent('c2')"></a>
  </div>
  <div class="wrapped">
    <a id="content3" class="icon" href="#content3"
        onclick="toggleContent('c3')"></a>
  </div>
</div>
<article id="c1" onclick="removeContent()">
  <div>
    <h1>De molen</h1>
    <p>Lorem ipsum dolor sit amet, consectetaur adipisicing velit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</article>
<article id="c2" onclick="removeContent()">
  .
  .
</article>
<article id="c3" onclick="removeContent()">
  .
  .
</article>

Downloaden:
 
Druk op de knop:  File: voorb539.zip, 1255 bytes.