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.
Wil je meer handige tips over HTML, CSS en JavaScript? Meld je aan voor de wekelijkse HTML-site Nieuwsbrief.
[mc4wp_form id=”940131″]
Laten we eens een handigheidje gaan maken.
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.
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>
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?