jQuery – Show / hide divs

Div’s showen of hiden, waar we vroeger veel custom javascript voor nodig hadden, is nu heel simpel uit te voeren met jQuery.

Voorbeeld code:

In css:

.optional {
display:none;
}

In jQuery:

$("#buttonshow").click(function() {
$("#divToShow").show();
});

$("#buttonhide").click(function() {
$("#divToShow").hide();
});

In html:

<input type="button" value="Show" id="buttonshow" />
<input type="button" value="Hide" id="buttonhide" />
<div class="optional" id="divToShow">Dit is mijn tekst</div>

Nu zal er wanneer je een click event uitvoert op de button met id buttonshow de div getoond worden en wanneer er een click event plaats vind op de button met id buttonhide, de div verdwijnt. De css classe optional zorgt ervoor dat de div standaard niet getoond word. Dit kan je natuurlijk ook andersom neerzetten, dat hij standaard getoond wordt, en met een druk op de knop hij verdwijnt.

Met de .show() en .hide() functie in jQuery kan je een object laten zien (.show()) of laten verdwijnen (.hide()).
Erg simpel dus!