Ukrywanie i Pokazywanie obiektu JavaScript

Jquery jest chyba najpopularniejszym frameworkiem JavaScript, co przekłada się na ilość dodatków czy gotowych rozwiązań wykorzystujących framework. Tyle słowem wstępu, wpis będzie dotyczył bardzo prostego, ale przydatnego i często wykorzystywanego, ukrywania obiektów na stronie. Z wykorzystaniem języka JavaScript i wspomnianego framerowka jquery

Ukrywanie obiektu za pomocą JavaSciprt

Aby ukryć element za pomocą JavaScript wystarczy jedna linijka kodu wywołana zdarzeniem OnClick:

		<div id="hideMe" style="margin: 5px; border: 1px #333 solid;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="document.getElementById('hideMe').style.display='none';">[x]</a>
			Treść, która zostanie ukryta.
			<br />
			<div class="clear"></div>
		</div>

demo Przykład 1 (klik)

Ukrywanie obiektu za pomocą JavaSciprt – funkcja

Łatwo można to przerobić w bardziej uniwersalną funkcję, którą można będzie wygodnie stosować w wielu miejscach na stronie:
W sekcji head należy wkleić funkcję JavaScript:

		<script language="JavaScript">
			function hideMe(id) {
				document.getElementById(id).style.display='none';
			}
		</script>

Gdzieś w sekcji body, gdzie ma być wyświetlany div, zastosować kod:

		<div id="hideMe" style="margin: 5px; border: 1px #333 solid;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="hideMe('hideMe');">[x]</a>
			Treść, która zostanie ukryta.
			<br />
			<div class="clear"></div>
		</div>

Argumentem obu funkcji hideMe jest identyfikator obiektu, który ma zostać ukryty.

demo Przykład 1 (klik)

Ukrywanie i pokazywanie obiektu za pomocą JavaSciprt – funkcje

Analogicznie można wykonać funkcję, która będzie pokazywać obiekt stosując zamiast display=’none’; display=’block’;

W sekcji head należy wkleić funkcje JavaScript:

		<script language="JavaScript">
			function hideMe(id) {
				document.getElementById(id).style.display='none';
			}
			function showMe(id) {
				document.getElementById(id).style.display='block';
			}
		</script>

Gdzieś w sekcji body, gdzie ma być wyświetlany div, zastosować kod:

		<div style="margin: 5px;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="showMe('hideMe2');">[pokaż]</a>
		<div class="clear"></div>
		</div>
 
		<div id="hideMe2" style="margin: 5px; border: 1px #333 solid;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="hideMe('hideMe2');">[x]</a>
			Treść, która zostanie ukryta.
			<br />
			<div class="clear"></div>
		</div>

Argumentem obu funkcji hideMe oraz showMe jest identyfikator obiektu, który ma zostać ukryty lub pokazany.

demo Przykład 2 (klik)

Łącząc ze sobą dwie poprzednie funkcje można stworzyć jedną, która będzie chować i pokazywać obiekt o danym identyfikatorze.

W sekcji head należy wkleić funkcje JavaScript:

		<script language="JavaScript">
			function toggleMe(id, type) {
				if(type == 1) {
					document.getElementById(id).style.display='block';
				}
				else if(type == 0) {
					document.getElementById(id).style.display='none';
				}
			}
		</script>

Gdzieś w sekcji body, gdzie ma być wyświetlany div, zastosować kod:

		<div style="margin: 5px;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="toggleMe('hideMe3', 1);">[pokaż]</a>
		<div class="clear"></div>
		</div>
 
		<div id="hideMe3" style="margin: 5px; border: 1px #333 solid;">
			<a href="#" title="zamknij" style="float: right; padding: 5px;" onclick="toggleMe('hideMe3', 0);">[x]</a>
			Treść, która zostanie ukryta.
			<br />
			<div class="clear"></div>
		</div>

Wywołanie funkcji toggleMe:
1) pierwszy argument to Identyfikator obiektu, który ma być ukryty/wyświetlony. Dlatego podany jest w cudzysłowie.
2) drugi argument to 0 lub 1, informuje funkcję czy obiekt ma być ukryty czy pokazany. (0 – ukrywa, 1 – pokazuje).
demo Przykład 3 (klik)