Site index
Portals
Artikelen
Software
Links
ContactTekst in- en uitklappen
1 bericht
• Pagina 1 van 1
Tekst in- en uitklappen
door Theo » 09 Sep 2008 20:52
Inleiding
Waarneer je grote lappen tekst of code wil weergeven op je site kan het soms makkelijker zijn om die stukken in en uit te klappen. In dit artikel leg ik je uit hoe je dat kunt doen.
Stap 1
Voor het in en uit klappen maken we gebruik van Javascript. Plaats onderstaande code in de<head> -sectie van je HTML document.
Javascript
Je kunt de code ook in een extern Javascript bestand plaatsen en deze vervolgens importeren.
Stap 2
Vervolgens hebben we het stuk tekst wat we willen in en uit klappen. De code ziet er als volgt uit.
HTML
Je ziet dat je in deshowcodes() het id op moet geven van de div die je wil laten zien.
Voorbeeld
Klik hier voor een voorbeeld.
Waarneer je grote lappen tekst of code wil weergeven op je site kan het soms makkelijker zijn om die stukken in en uit te klappen. In dit artikel leg ik je uit hoe je dat kunt doen.
Stap 1
Voor het in en uit klappen maken we gebruik van Javascript. Plaats onderstaande code in de
Javascript
- Code: Alles selecteren
<script type="text/javascript">
/*
© MASTERCODE
http://www.mastercode.nl
Door: Ted [webmaster [a] mastercode [p] nl]
*/
function showcodes(a,codediv)
{
var divje = document.getElementById( codediv );
if (divje.style.display == "block")
{
divje.style.display = "none";
a.innerHTML='Klap uit';
}
else
{
divje.style.display = "block";
a.innerHTML='Klap in';
}
}
</script>
Je kunt de code ook in een extern Javascript bestand plaatsen en deze vervolgens importeren.
Stap 2
Vervolgens hebben we het stuk tekst wat we willen in en uit klappen. De code ziet er als volgt uit.
HTML
- Code: Alles selecteren
<span style="cursor: pointer;" onclick="showcodes(this,'div_tekst');">Klap uit</span>
<div id="div_tekst" style="display: none;">
... hier de lange teksten / codes ...
</div>
Je ziet dat je in de
Voorbeeld
Klik hier voor een voorbeeld.
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
1 bericht
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast