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!

6 Reacties

  1. Leuk, maar nu moet je voor elke vraag een aparte ID maken en in je CSS zetten? Dat is een beetje veel werk vind je niet? Zo kan het ook:

    jQuery(document).ready(function($)
    {
    $('.antwoord').hide();

    $('.vraag').click(function()
    {
    $(this).parent().parent().find('.antwoord').slideToggle('slow');
    return false;
    });

    $("#showall").click(function()
    {
    $('.antwoord').slideToggle('slow');
    return false;
    });
    });

    Al word je HTML structuur wel wat anders:

    div.vraagcontainer
    – p-tag en a.vraag (met de vraag in de a)
    – div.antwoord
    – p-tag met een antwoord

  2. als ik nu op het antwoord klik krijg je achter de url een # teken. Als je dan vorige doet blijf je op dezelfde pagina.
    Hoe kun je dat voorkomen?

  3. zou het heel anders doen.
    Waarom? omdat indien JS voor de een of andere niet werkt, de antwoorden sowiso wel zichtbaar zijn. Als JS wel werk worden ze verborgen totdat je klikt.
    kan zijn dat ik wat kort door de bocht ben met de laatste regel JS, eventueel moet ik selectors gebruiken, zie .find()

    de html:

    <dl>
    <dt>Vraag?<dt>
    <dd>Antwoord<dt>
    <dl>

    CSS: niks

    javascript (jquery):
    $('dd').hide()
    $('dt').onclick( this.$(dd).toggle() )

  4. erg mooie functie…zit echter met een probleem. Ik wil dat het menu op sommige pagina's wel en andere niet te zien is.
    heb dit als js:
    $(document).ready(function(){
    $('#showmenu').click(function() {
    $('#menu').slideToggle('slow');
    });
    $('#hidemenu').click(function(){
    $('#menu').slideToggle('slow');
    });
    });

    nu heb ik een pagina waar de andere pagina's aangeroepen worden; in een div staat:
    stuk tekst <a href="#pagina1" id="showmenu">pagina 1</a> weer een stuk tekst <a href="#pagina2" id="showmenu">pagina 2</a>

    nu laat hij bij de eerste link wel het menu zien, maar als ik meteen naar pagina 2 ga laat hij niets zien. Hoe los ik dit op?

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *