Ascunderea elementelor din pagina cu JavaScript

Am sa dedic acest articol unei metode de ascundere a elementelor din pagina folosind JavaScript. Sigur ca daca folosim jQuery acest lucru se poate realiza cu o singura linie de cod, dar poate nu vrem sa includem o librarie de 29k  pentru un lucru atat de simplu.

In acest caz, va trebui sa facem un pas inapoi si sa vedem cum putem face acest lucru folosind-u-ne numai de motorul JavaScript prezent in orice browser din ziua de azi.

Asadar, sa nu mai pierdem timpul. Incepem mica noastra demonstratie cu un cod html de baza. Avem de-a face cu un div care va fi ascuns si un buton pe post de declansator:

<div id="wrapper">
	<input type="button" id="button" value="Ascunde" onclick="toggle('theDiv')" />
	<div id="theDiv">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat turpis quis sem aliquet dignissim. Sed pellentesque eros lacinia lorem malesuada ornare. Aenean eget elementum justo. Donec ut justo sem, non volutpat sapien...</p>
	</div>
</div>

Observati ca input-ul de tip button are un atribut onclick care cheama o anume functie toggle(). De ce se numeste asa? Pentru ca functia nu numai ascunde elementul vizat. Il ascunde daca este vizibil si il arata daca este ascuns. Deci cum arata functia javascript?

<script type="text/javascript">
	function toggle(id)
	{
		var obj = document.getElementById(id);
		var button = document.getElementById('button');

		if(obj.style.visibility == 'hidden')
		{
			button.value = 'Ascunde';
			obj.style.visibility = 'visible';
		}
		else
		{
			button.value = 'Arata';
			obj.style.visibility = 'hidden';
		}
	}
</script>

Nu e prea mult de explicat. Functia ia ca parametru, id-ul elementului pe care trebuie sa-l ascunda. Mai departe, analizeaza elementul si decide daca trebuie sa ascunda sau sa arate elementul. Mai mult, are grija sa schimbe textul scris pe buton in functie de starea elementului.

Gata. E atat de simplu. Evident ca acest exemplu este unul cat se poate de simplu. Codul poate fi rafinat sa tina cont de mai multe situatii. Daca aveti intrebari sau nelamuriri legate de codul de mai sus, va astept cu comentarii sau in sectiunea Intreaba-ma.

Vezi Demo