top2. De html code
We gaan nu een link en een div maken. Laten we beginnen met de link zet de volgende code in het body gedeelte.
<a href="#" class="showhide">Verberg</a>
We gaan ook een div maken met daarin tekst die wordt verborgen en getoond. Zet de volgende code ook tussen de body tags. Ik heb hem in dit geval gevuld met Lorem ipsum tekst, je kunt dit natuurlijk veranderen.
<div class="tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies cursus est. Fusce et nisi ligula, sit amet venenatis nunc. Nullam vitae est nisl, vel iaculis lorem. Aenean tristique risus vitae sem suscipit eleifend. Proin pulvinar, ipsum eu condimentum porta, nisl diam adipiscing nisl, ac lobortis ipsum urna ut mauris. Nulla blandit, turpis vel pretium vestibulum, leo lacus cursus ligula, at tempor nulla nulla eget enim. Sed ac rutrum nisl. Vivamus blandit ullamcorper dolor eget vestibulum. Proin in dictum lectus. Proin sagittis elit ac augue venenatis rutrum. Proin et arcu massa, eget pharetra purus. Maecenas aliquam gravida enim quis placerat. Vivamus et blandit tellus.</div>
top3. De jQuery code
Eerst moeten we ervoor zorgen dat als de tekst van de link 'Verberg' is, de div wordt verborgen en de tekst wordt veranderd. Ook moeten we ervoor zorgen dat als de tekst van de link 'Toon' is, de div wordt weergegeven en de tekst weer wordt teruggezet naar 'Verberg'. Hieronder staat de code met uitleg.
//als de pagina gereed is
$(document).ready(function(){// we maken een functie aan omdat dit makkelijker is om aan te roepenfunction showandhide(){//als de tekst van de link verbergen isif($("a.showhide").text()=="Verberg"){// zorg dat de div wordt verborgen; je kunt 'slow' ook vervangen door 'fast'
$("div.tekst").hide("slow");// zorg dat de tekst van de link wordt omgezet naar 'Toon'
$("a.showhide").text("Toon");// als de tekst van de link geen 'Verbergen' dus 'Toon' is}else{// zorg dat de div wordt weergegeven; ook hier kun je 'slow' weer vervangen door 'fast'
$("div.tekst").show("slow");// zorg dat de tekst van de link wordt omgezet naar 'Verberg'
$("a.showhide").text("Verberg");}}// de functie aanroepen als er op de link wordt geklikt
$("a.showhide").click(showandhide)});
top4. Slot
Dit was dan mijn eerste tutorial op Sitemasters.be. Ik hoop dat jullie er iets van hebben geleerd