jQuery

Div eltüntetése, megjelenítése jQuery segítségével

A példában egy egyszerű megoldás látható div eltüntetésére és megjelenítésére jQuery segítségével. A feladat az volt hogy egy checkbox bepipálásakor figyelmeztető szöveg jelenjen meg. (A checkbox állapota határozta meg hogy a dátum választó szövegmezők engedélyezett vagy letiltott állapotban jelenjenek meg a weboldalon.)

Két HTML elem szerepel a példában:

  • checkbox – azonosítója: DisableDate
  • információs panel – azonosítója: DateInfo

Az hogy az információs panel a checkbox mellett jelenjen meg, CSS beállításával történik.

A checkbox melynek állapota vezérli az információs panel megjelenítését, eltüntetését.

<input type="checkbox" class="dateFilter" id="DisableDate" name="DisableDate">szűrés dátum szerint

Az információs panel amit el kell tüntetni illetve meg kell jelenteni, a checkbox bejelölésétől függően.

<div id="DateInfo" title="Bezáráshoz kattintson a feliratra!">Kérjük figyeljen hogy kiválasztott dátumok között maximum 40 év legyen!</div>

A jQuery kódrészlet elején CSS beállítással eltüntetésre kerül a információs panel, hogy az oldal betöltődésekor ne jelenjen meg. Az információs panelre az azonosítóján keresztül hivatkozom: “#DateInfo”

$(document).ready(function(){
	$("#DateInfo").css("display","none");
	$("#DisableDate").click(function(){
		// ha be van pipálva a checkbox
		if ($("#DisableDate").is(":checked"))
		{
			//az információs panel megjelenítése
			$("#DateInfo").show("fast");
		}
		else
		{
			//az információs panel elrejtése
			$("#DateInfo").hide("fast");
		}
	});
	$("#DateInfo").click(function(){
		$("#DateInfo").hide("fast");
	});
});

A checkbox click eseményéhez kapcsolódik az információs panel megjelenítése illetve eltüntetése.

Ahhoz hogy az információs panelre kattintva, azt el tudja tüntetni a felhasználó, a click eseményére beállítjuk önmaga elrejtését.

Demo megtekintése