Hoe kun je tekst laten in- en uitklappen

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.

Stap 1 is het maken van je tekst.

<body>
<a href="#" onclick="return kadabra('tekst');">Hier de link naar de tekst hieronder.</a>
<div id="tekst">
Dit kun je natuurlijk op allerlei manieren gaan gebruiken.
Bijvoorbeeld voor een uitklapmenu of voor een vraagspel. In de stijl kun je aanpassingen doen aan de breedte
en bijvoorbeeld de achtergrondkleur.</div>
 
<div> En de volgende gewone tekst komt er gewoon weer onder
te staan.</div>
</body>

De stijl van de uitklap tekst

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 hartenlust kunt aanpassen.

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

Javascript

Vervolgens heb je JavaScript 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 van je html document.

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

De link

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 tekst hieronder.</a>

Waneer je in Javascript het stukje onclick="return kadabra('tekst'); vervangt voor
onmouseover="return kadabra('tekst'); onmouseout="return kadabra('tekst'); dan creëer je hetzelfde effect, maar dan door je muis eroverheen te bewegen.

Auteur: Bjorn Simmering

Mijn naam is Bjorn Simmering en met deze website ga ik dus door het leven als Meneer Simmering. Ik schrijf over HTML & CSS, websites maken, WordPress en meer... Lees meer over mij »

2 gedachten over “Hoe kun je tekst laten in- en uitklappen”

  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. Vereiste velden zijn gemarkeerd met *