Informatie laten verdwijnen en weer laten verschijnen

Hieronder zie je twee drukknoppen en een plaatje. Als je op de knop "Visibility" drukt verdwijnt het plaatje maar de bladzijde verandert niet. Er ontstaat een lege ruimte.
Als je op de knop "Display" drukt verdwijnt het plaatje en wordt ook de lege ruimte opgevuld.

Visibility Display

N.B.: Als je eerst op "Visibility" drukt en daarna op "Display", verdwijnt eerst het plaatje en daarna wordt de open ruimte opgevuld. Als je vervolgens weer op "Visibility" drukt, komt het plaatje niet terug omdat de er geen ruimte voor is. Die ruimte ontstaat pas weer als je weer op "Display" drukt.

In het bovenstaande voorbeeld is het gedaan met een plaatje. Maar het kan ook met tekst en andere HTML- elementen. Dat maakt deze techniek uitermate geschikt voor het maken van onder andere dynamische menus.
Hieronder staat beschreven hoe je dit aanpakt. Alle op deze pagina beschreven code kun je downloaden voor je eigen gebruik, inclusief de plaatjes.

• Om dit effect te bereiken geef je het HTML-element dat je wilt laten zien/verdwijnen een id. Het plaatje heeft het attribuut id='Plaatje' in de <img>-tag meegekregen.
• Behalve dat moet je -afhankelijk van wat je wilt doen- de style-attributen visibility en/of display meegeven. Het plaatje heeft ze beide, zie onderstaande code.

  <img src="plaatje0.gif" alt="Kop en Schotel" style="visibility:visible; display:block" id="Plaatje" width="216" height="145" border="1">

  De veranderingen ontstaan door visibility en/of display te veranderen. De referentie aan het plaatje loopt daarbij via de id.
   
• Het daadwerkelijk veranderen van visibility en display gebeurt op deze pagina door de JavaScript functions ToggleVis() resp. ToggleDsp(), die worden aangeroepen door op de knoppen te drukken. De code staat onderaan deze bladzijde.
   
• Deze functions werken als volgt:
  • Eerst wordt een refrentie aan het plaatje gemaakt. Dat gebeurt door aanroep van getElementById('Plaatje'). Het resultaat wordt opgeslagen in de variable a.
  • De function ToggleVis() kijkt of het plaatje "visible" is. Als dat zo is wordt het "hidden" gemaakt, anders "visible".
  • De function ToggleDsp() kijkt of de zichtbaarheid "block" is. Als dat zo is wordt het "none" gemaakt, anders "block".
   
• Merk op hoe de aanroep van getElementById() er uit ziet:
  a = document.getElementById('Plaatje'). document moet erbij, anders werkt het niet.
• Merk ook op hoe de variabele a wordt gebruikt: als referentie aan een object, niet om data in op te slaan.
   
• Deze aanpak beperkt zich niet tot plaatjes. Je kunt het doen met elke tag die over het id-attribuut beschikt. Maar het kan ook met complete stukken van tekst, desgewenst met de plaatjes erbij, hyperlinks, enzovoort. Dit bereik je door de HTML-code van de betreffende delen van je webpagina tussen <div id="..." style="..."> ... </div>-tags te zetten. Alles wat tussen deze tags staat verdwijnt / verschijnt mee.
• Als je alléén van de display optie gebruik wilt maken hoef je visibility niet in het style-attribuut op te geven. Andersom geldt ook.
  De voorbeelden hieronder gebruiken alléén de display optie.
• Als je dit wilt toepassen op meerdere blokken HTML-code dan moet je er voor zorgen dat alle id's verschillend zijn. Een goed voorbeeld van een dergelijke (ingewikkelde) toepassing is te vinden in het item "Nep-portal II".

Een voorbeeld: Tekst met toelichting
Klik met de muis op een van de punten hier onder. Er verschijnt een toelichtende tekst, die weer verdwijnt als je op een ander punt klikt.

Punt 1

Dit is tekst bij punt 1. Alleen tekst

Punt 2

Dit punt 2 met een plaatje:

Punt 3

Dit is punt 3. Je kunt hier bijvoorbeeld ook hyperlinks in zetten. Handig als je een dynamisch menu wilt maken.

Punt 4

Dit is punt 4. Eigenlijk kun je dit doen met alle geldige HTML-code!

De werking van dit voorbeeld is als volgt:

• De teksten Punt 1, Punt 2, enz. staan elk in een paragraaf. In elke paragraaf is de toelichting geprogrammeerd, tussen <div>-tags. Die zijn echter onzichtbaar doordat display op none staat.
De <p>-tags hebben een onClick eventhandler, die de functie Voorbeeld('xxx') activeren. 'xxx' is het id van de <div> die moet worden getoond. Merk op dat het tussen enkele aanhalingstekens staat.
• De functie Voorbeeld() zet eerst de display-attributen van alle hier gebruikte <div>-tags op none. Vervolgens wordt het gevraagde ID op display:block gezet.
• Er is nog wat vreemds met deze code. De vier paragrafen zijn samen genomen door er een <div> ... </div>-tag omheen te zetten. Dit is nodig om te zorgen dat het eerste item (Punt 1) goed werkt!
• Je kunt dit gebruiken bij alle geldige HTML-code. Gebruik van scripts wordt niet aangeraden. Het beperkt zich tot aanroep van functions. Het op deze plaats definiëren van functions wordt sterk afgeraden, omdat niet alle browsers er op dezelfde wijze mee omgaan.
• De teksten Punt 1, Punt 2, enz. verraden zich als link doordat de cursor in een handje verandert als je er overheen gaat. Dit is gedaan door het attribuut style="cursor:pointer" op te geven in de <p>-tag. Zie ook het item "Cursor veranderen".
• Een veel dieper uitgewerkt voorbeeld vind je in het item Accordeon-content.

Gebruik:

• De code van de JavaScript-functions staat in de <HEAD>.
• De overige code staat in de <BODY>.

De code van het voorbeeld met het plaatje ziet er als volgt uit:
 
(De code van het plaatje staat in de tekst; zet dit in de <HEAD>)

<script>
function ToggleVis() {
  var a = document.getElementById('Plaatje');
  if (a.style.visibility == "visible") a.style.visibility = "hidden"
  else a.style.visibility = "visible";
}
function ToggleDsp() {
  var a = document.getElementById('Plaatje');
  if (a.style.display == "block") a.style.display = "none"
  else a.style.display = "block";
}
</script>

De code van het voorbeeld met de Punten 1 t.m. 4 ziet er als volgt uit:
 
(Zet dit in de <HEAD>)

<script>
function Voorbeeld(ident) {
  document.getElementById('Punt1').style.display = "none";
  document.getElementById('Punt2').style.display = "none";
  document.getElementById('Punt3').style.display = "none";
  document.getElementById('Punt4').style.display = "none";
 
  document.getElementById(ident).style.display = "block";
}
</script>

<div>
<p onclick="Voorbeeld('Punt1')" style="cursor:pointer"><b>Punt 1</b><br>
<div id="Punt1" style="display:none;font-size:8pt;color:darkgreen">Dit is tekst bij punt 1. Alleen tekst</div></p>
<p onclick="Voorbeeld('Punt2')" style="cursor:pointer"><b>Punt 2</b><br>
<div id="Punt2" style="display:none;font-size:8pt;color:darkgreen">Dit punt 2 met een plaatje: <img src="biertje.gif" alt="Proost" width="60" height="15" hspace="10" border="0"></div></p>
<p onclick="Voorbeeld('Punt3')" style="cursor:pointer"><b>Punt 3</b><br>
<div id="Punt3" style="display:none;font-size:8pt;color:darkgreen">Dit is punt 3. Je kunt hier bijvoorbeeld ook <a href="surfhulp.htm" target="NewBen">hyperlinks</a> in zetten. Handig als je een dynamisch menu wilt maken.</div></p>
<p onclick="Voorbeeld('Punt4')" style="cursor:pointer"><b>Punt 4</b><br>
<div id="Punt4" style="display:none;font-size:8pt;color:darkgreen">Dit is punt 4. Eigenlijk kun je dit doen met alle geldige HTML-code!</div></p>
</div>

Downloaden:
 
Druk op de knop:  File: voorb149.zip, 15 985 bytes.

Opmerking:
 
Een methode om vergelijkbare effecten te verkrijgen is door de website zelf de HTML-code te laten wijzigen. Dat doe je door document.innerHTML aan te passen. Zie het item "HTML dynamisch wijzigen".
 
visiblity kun je, naast visible en hidden, ook instellen op collapse. Dat werkt alleen voor tabellen en in een flex-layout. Je kunt er rijen (<tr>), rij-groepen (<tbody>), kolommen (<col>), kolomgroepen (<colgroup>) en flex-items mee verbergen alsof je display:none gebruikt.
Met andere elementen werkt het alsof je visibility:hidden gebruikt.