Ben's Hobbyhoekje -- Uitklappend paneel

Uitklappend paneel

Klik mij

Als je op de knop hiernaast drukt verschijnt er (een eindje naar beneden op deze bladzijde) een groene cirkel met de tekst "klik mij". Als je dat doet schuift de cirkel naar boven. Er klapt een paneel uit met een plaatje en wat tekst. Als je weer op de cirkel klikt schuift die weer terug naar beneden; tegelijkertijd sluit het paneel zich.
De knop is niet relevant voor het voorbeeld, maar dient alleen om de tekst leesbaar te houden.

Op deze bladzijde wordt besproken hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 88 (juli 2016), pag. 44 en 45. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.

Voor deze site is de code van net voorbeeld uitgebreid en verbeterd. De vormgeving is aangepast voor deze site.

Er worden twee items besproken:
1. De werking van het script.
2. Toepassen in je eigen site.
De werking van het script
De code bestaat uit HTML, CSS (in de file styles.css) en wat JavaScript (in de <head>).
HTML
De HTML van het voorbeeld bestaat uit een aantal geneste <div>-tags. De beste plaats voor deze code is aan het begin van de <body>, voor de andere inhoud.
De buitenste div heeft id="effect". Die dient alleen om het effect te positioneren in het document en het op zijn plaats te houden. Het effect zweeft boven de rest van het document (z-index: 5;). Daardoor is het effect altijd zichtbaar en verdwijnt het niet geheel of gedeeltelijk achter andere content op de pagina.
Binnen effect staan twee andere <div>-tags: circle voor de cirkel en block voor het uitklappende paneel.
Binnen block is er nog een <div>-tag txt, waarin de content van het paneel staat.
De tekst in de cirkel staat in een <span> binnen circle.
De knop rechts bovenaan de pagina is er voor het gemak van de lezer. Door het voorbeeld te verbergen verdwijnt niet een deel van de tekst achter de cirkel.
CSS
De CSS van #effect zorgt voor de positionering van het paneel (en daarmee van de cirkel) in het document. Bij de implementatie op deze pagina is een oude truc gebruikt om het paneel in het midden te krijgen:
- De linker marge is -200px. Dat is de helft van de width, met een min-teken.
- Daarbij is de padding gelijk aan 50%.
De width van #effect moet gelijk zijn aan de width van #block. De height van #effect moet gelijk zijn aan de height van #block plus de height van #circle.
De z-index is 5. Daardoor zweeft het effect boven het document.
De CSS van #block stelt de afmetingen en de achtergrondkleur van het tekstblok in. De top is minimaal de straal van de cirkel, hier dus 40px.
De CSS van #circle stelt de afmetingen en de achtergrondkleur van de cirkel in. De top is nul, left is de helft van de breedte van #block min de straal van de cirkel. De cirkel staat nu netjes in het midden en steekt voor de helft uit boven #block.
De tekst in de cirkel wordt opgemaakt in #circle span.
De beweging van block wordt gemaakt door aan #block de klassen anim1H of anim1W toe te kennen of door die juist weg te halen.
De beweging van circle wordt op dezelfde manier gemaakt als block, maar met de klassen anim2H en anim2W.
De animatie van block circle verloopt via @keyframes.
De tekst in het paneel wordt opgemaakt met #txt en de daarbinnen gebruikte elementen <h1> en <p>.
Je kunt binnen #txt alle geldige HTML kwijt. Houd het eenvoudig, want dit is niet bedoeld voor technische hoogstandjes.
De zichtbaarheid van de content in #txt wordt geregeld met de klassen .hide en .show. Dit verloopt via een eenvoudige transition.
JavaScript
Als de pagina is geladen wordt via window.onload de function init() gedraaid. Deze stelt een paar variabelen in, waardoor de referenties aan de blokken block, circle resp. txt wat efficiënter verlopen.
Het JavaScript dat is gekoppeld aan de knop, de function toonVoorbeeld(), doet niet anders dan de zichtbaarheid (opacity) te veranderen van 0 in 1, of omgekeerd. Daarom moet het attribuut style="opacity:0" aanwezig zijn in de div met id="effect". Je maakt dan een eenduidige instelling (nl. onzichtbaar) voor het effect met de cirkel en het paneel.
Tegelijkertijd wordt de knoptekst aangepast, van "Toon het voorbeeld" in "Verberg het voorbeeld" en omgekeerd.
Als je op de cirkel klikt, wordt de function runAnimation() gestart. Deze kijkt eerst of het paneel is uitgeklapt of niet. Daarvoor wordt de variabele open gebruikt.
Als open == false (de beginsituatie) dan worden de klassen Anim1W, Anim2W en hide verwijderd van block, circle resp. txt.
Deze drie blokken krijgen de klassen Anim1H, Anim2H resp. show.
Als open == true (de eindsituatie) dan worden de klassen Anim1H, Anim2H en show verwijderd van block, circle resp. txt.
Deze drie blokken krijgen de klassen Anim1W, Anim2W resp. hide.
Toepassen in je eigen site
Bedenk hoe het er uit moet gaan zien: Kleuren, plaats op het scherm.
Download de zip-file en pak hem uit.
Zet de HTML- en JavaScript-code in je document, zoals hierboven is beschreven.
Pas de CSS aan. Hierboven staat aangegeven hoe het werkt. Let vooral op de afmetingen van #effect en #block.
Als je de knop niet gebruikt, kun je de HTML-tag <button>, de JavaScript-function toonVoorbeeld() en de CSS-klasse .Knop weglaten.

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 init() {
var block = document.getElementById("block");
var circle = document.getElementById("circle");
var txt = document.getElementById("txt");
}

window.onload=init;

var open = false;
function runAnimation() {
if (!open) {
block.classList.remove("anim1W");
circle.classList.remove("anim2W");
txt.classList.remove("hide");
block.classList.add("anim1H");
circle.classList.add("anim2H");
txt.classList.add("show");
open = true;
} else {
block.classList.remove("anim1H");
circle.classList.remove("anim2H");
txt.classList.remove("show");
block.classList.add("anim1W");
circle.classList.add("anim2W");
txt.classList.add("hide");
open = false;
}
}
</script>

(Zet dit bij voorkeur aan het begin van de <BODY>)

<div id="effect" style="opacity:0">
<div id="block">
<div id="txt" class="hide">
<h1>Tekst en plaatje</h1>
<p><img src="leftface.gif" alt="" height="32" width="42"
border="0">
Lorem Ipsum voluptatum aliquando convenire insolens. Tempor
integre gravida es repudiandae tation natum sagittis vivendo
pri expetendis accusam deseruisse apeirian.</p>
</div>
</div>
<div id="circle" onclick="runAnimation()">
<span>Klik mij</span>
</div>
</div>

De code van de knop ziet er als volgt uit:

(Zet dit in de <HEAD>).

<script>
function toonVoorbeeld() {
var aa = document.getElementById('effect');
var bb = document.getElementById('Knop');
if (aa.style.opacity == 0) {
aa.style.opacity = 1;
bb.innerHTML = "Verberg het voorbeeld";
} else {
aa.style.opacity = 0;
bb.innerHTML = "Toon het voorbeeld";
}
}
</script>

(Zet dit in de <BODY> op de plaats waar de knop moet verschijnen).

<button type="button" id="Knop" class="Knop"
onclick="toonVoorbeeld()">Toon het voorbeeld</button>

De CSS voor de opmaak van de knop staat in style.css.

(Voeg dit argument toe aan de tag <div id="effect>).

style="opacity:0"

Downloaden:

Druk op de knop: File: voorb530.zip, 2258 bytes.