In- en uitklappen van tekst

In- en uitklappen van tekst

Soms zijn er van die handigheidjes die het werken met CSS zo aantrekkelijk maken.
Stijlen zijn heel handig, maar in combinatie met JavaScript biedt het nog leukere
mogelijkheden. Je krijgt dan DHTML, of Dynamische HTML. Laten we eens een handigheidje
gaan maken.
Klik maar eens op deze link.

Dan verschijnt er ineens een stuk tekst wat er eerst niet was. Bijvoorbeeld om
een uitklaptekst te maken of een antwoord even te verbergen.

Heel moeilijk om te maken zal menigeen denken. En juist dat valt reuze mee.
Stap een is het maken van je tekst.

<body>
Hier de link naar de tekst hieronder.
<p id=”tekst”>
Dit kun je natuurlijk op allerlei manieren gaan gebruiken.
Bijvoorbeeld voor een uitklapmenu of voor een vraagspel
ofzo. In de stijl kun je aanpassingen doen aan de breedte
en bijvoorbeeld de achtergrondkleur.</p>
<p> En de volgende gewone tekst komt er gewoon weer onder
te staan.</p>
</body>

Ten tweede
gaan we de stijl maken, die je plaatst in de head van de broncode, dus tussen
<head> en </head>. Bij deze stijl is alleen ‘display: none;’ van belang.
De rest is alleen maar opmaak die je naar hartelust kunt aanpassen.

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

Vervolgens heb je een JavaScriptje nodig. Dit om het uitklappen en inklappen te regelen.
De stijl is namelijk gezet op onzichtbaar en moet door een klik met de muis veranderen
in zichtbaar. Deze plaats je ook in de head.

<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>

Als laatste maak je het anker aan, de link die het stukje verborgen tekst activeert.

<a href=”#” onclick=”return kadabra(‘tekst’);”>
Hier de link naar de teskt hieronder.</a>

Waneer je het stukje onclick=”return kadabra(‘tekst’); vervangt voor
onmouseover=”return kadabra(‘tekst’); onmouseout=”return kadabra(‘tekst’);
dan creeer je hetzelfde effect, maar dan door je muis eroverheen te bewegen.

          Leuk als je dit artikel deelt:
Share

2 gedachten over “In- en uitklappen van tekst

  1. Waar moet dit stukje tekst komen? <a href=”#” onclick=”return kadabra(‘tekst’);”>
    Hier de link naar de teskt hieronder.</a>
    Ik heb het uitgeprobeerd maar krijg geen resultaat…
    Dit is mijn code in html:
    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    #tekst {
    display: none;
    width: 250px;
    border: 1px solid black;
    background-color: #cccccc;
    padding: 5px;
    font-size: 12px;
    }
    </style>
    <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>
    </head>
    <body>
    <a href=”#” onclick=”return kadabra(‘tekst’);”>
    Hier de link naar de teskt hieronder.</a>
    Hier de link naar de tekst hieronder.
    <p id=”tekst”>
    Dit kun je natuurlijk op allerlei manieren gaan gebruiken.
    Bijvoorbeeld voor een uitklapmenu of voor een vraagspel
    ofzo. In de stijl kun je aanpassingen doen aan de breedte
    en bijvoorbeeld de achtergrondkleur.</p>
    <p> En de volgende gewone tekst komt er gewoon weer onder
    te staan.</p>

    </body>
    </html>

  2. Vraagde, ik had een code staan in mijn artikel en dat werkte goed wat betreft het uitklappen van een vraag met antwoordt bij een muisklik. Nu werkt de code niet meer en wil vragen of er iemand is die mij kan helpen wat betreft de cade die ik moet invoeren.

    Ik heb de bovenstaande codes geplakt maar krijg niet het resultaat :-((

    uitklappen maarDit is een vraag
    Dit een tekst die uitgeklapt moet worden
    Dit is een vraag
    Dit een tekst die uitgeklapt moet worden
    Dit is een vraag
    Dit een tekst die uitgeklapt moet worden
    Dit is een vraag
    Dit een tekst die uitgeklapt moet worden
    Dit is een vraag
    Dit een tekst die uitgeklapt moet worden
    Dit is een vraag
    Dit een tekst die uitgeklapt moet worden

    Etc. etc. wie kan mij helpen aub?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *