Script: in en uitklappen van tekst binnen website

P.s. Dit bericht wordt vrij veel bezocht en gelezen maar is gedeeltelijk “out of date”. Mocht u interesse hebben om dit script toe te passen op uw website, stuur dan even een berichtje naar: support@dewebmeester.nlNa toesturen van email aan dit adres wordt er automatisch een ticket voor u aangemaakt.

Het lijkt zo makkelijk als je alleen maar websites bekijkt en ze niet hoeft te maken: een link in de website en als je er op klikt, klapt er een stukje tekst open. Dat is makkelijk omdat de bezoeker niet een aparte webpagina hoeft te openen om de tekst te kunnen bekijken en omdat de bezochte pagina niet direct hele lappen tekst lijkt te bevatten. Eerlijk gezegd maak ik tegenwoordig amper meer een website zonder deze techniek te gebruiken. Voorbeelden: www.fransjorna.nl en www.beautysalonalaa.nl

Er zijn een viertal elementen nodig om dit te laten werken:

1. Het script:

   <script type=”text/javascript”>
   function kadabra(zap) {
   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
   if (abra.display == “block”) {
   abra.display = “none”;
   } else {
   abra.display= “block”;
   }
   return false;
   } else {
   return true;
   }
   }
   </script>
   (te plaatsen in de head)

2. Style script:

   <style type=”text/css”>
   #tekst {
   display: none;
   width: 250px;
   border: 1px solid black;
   background-color: #cccccc;
   padding: 5px;
   font-size: 12px;
   }
   </style> (ook plaatsen in de head)

3. Tekst die open moet klappen (zelf schrijven) en die vervolgens plaatsen tussen:

   <p id=”tekst”>
   </p> (de verwijzing “tekst” kan natuurlijk aangepast worden en dan moet die vervolgens ook aangepast worden binnen het style script en de link hieronder.)

4. Een link waarop geklikt moet worden om de tekst uit 3) zichtbaar en onzichtbaar te maken:

   <a href=”#” onclick=”return kadabra(’tekst’);”> Hier de link naar je tekst die zichtbaar is voor je bezoekers en waar ze op moeten klikken om de tekst uit 3) te kunnen zien.</a>

En illustraties / pictures / images / foto’s? Dat werkt op dezelfde manier. Alleen onder 3) een verwijzing naar een image bestand plaatsen in plaats van tekst. Maar wat betreft images en foto’s raad ik toch echt lightbox aan.

Groeten,

Meindert (dewebmeester.nl)

(wordt vervolgt)