jQuery – hide, show en toggle

In de vorige artikelen heb ik de basis uitgelegd van jQuery. Het is nu natuurlijk leuk om eens een paar toepassingen in de praktijk te laten zien van jQuery. Met behulp van deze effecten kun je nog wel het een en ander aan theorie oppikken. Ik zal proberen zo concreet mogelijk aan het werk te gaan met de show (verschijnen), hide (verdwijnen) en toggle (aan en uit) acties.

Stel je voor dat je een FAQ-pagina gaat aanmaken. Alle vragen zijn zichtbaar, de antwoorden zijn niet zichtbaar, maar moeten met een klik zichtbaar worden.

Als eerste de html code voor een vraag en antwoord.

Vraag 1: Op welke manieren kun je de webmaster bereiken?
Je kan hem  een email sturen, je kunt het contactformulier invullen of je kunt hem bellen via 06-111 111 11.

Je ziet dat de vraag een unieke ID mee krijgt, wat ook geldt voor het antwoord. Deze ID’s worden gebruikt om de functie te koppelen aan het onderdeel.

Naast de jQuery code moeten we ook wat CSS toevoegen aan #antwoord1. Namelijk dat het antwoord bij het starten niet zichtbaar is. Daarvoor zetten we in de CSS code:

#antwoord1 {
display: none;
}

Nu de jQuery code.

$(document).ready(function(){
   $('#showKnop').click(function() {
      $('#antwoord1').show();
   });
});

In deze code zie je gebeurtenis click staan. Deze zal vaker voorkomen in jQuery code. Door klikken activeer je namelijk iets. Er wordt iets in werking gezet.

Er zijn vele acties die iets in werking zetten, dat gebeurt de hele tijd als je op een computer werkt. Je beweegt een muis, je klikt er op, je typt een letter, allemaal acties die een gebeurtenis in werking stellen.

Natuurlijk is het wel leuker als het bovenstaande voorbeeld ook de tekst weer laat verdwijnen. dat doe je met de actie hide. In het eerste voorbeeld maken we hiervoor een aparte handeling aan. Straks laat ik zien hoe je deze twee kunt integreren tot 1 functie, toggle.

De html code breiden we uit met de regel ‘verbergen’.

Vraag 1: Op welke manieren kun je de webmaster bereiken?
Je kan hem  een email sturen, je kunt het contactformulier invullen of je kunt hem bellen via 06-111 111 11.
Verberg

De jQuery code breiden we uit met de actie .hide:

$(document).ready(function(){
   $('#showKnop').click(function() {
      $('#antwoord1').show();
   });
   $('#verBergen').click(function(){
      $('#antwoord1').hide();
   });
});

Bovenstaande code is een beetje veel, daarom is het ook mogelijk om de twee functies ineen te zetten met de actie toggle. Je krijgt dan de volgende code:

$(document).ready(function(){
   $('#showKnop').click(function() {
	   $('#antwoord1').toggle();
   });
});

Nu is dit wat saai, dus gaan we met jQuery wat effecten toevoegen zodat het antwoord wat spannender tevoorschijn komt en verdwijnt. Daarvoor gebruiken we slideToggle. Daarnaast kunnen we de actie ook nog een snelheid meegeven. De code wordt dan als volgt:

$(document).ready(function(){
   $('#showKnop').click(function() {
	   $('#antwoord1').slideToggle('slow');
   });
});

In plaats van .slideToggle kun je ook kiezen voor slideDown of slideUp.

Genoeg voor deze keer. Ik denk dat je langzamerhand gaat zien dat er veel mogelijkheden liggen om leuke toepassingen uit te voeren met jQuery. Natuurlijk heb ik het nog steeds over de basis, maar dat is de manier waarop je het moet leren!