JavaScript: Ukrywanie fragmentów strony

Zobacz jak działa skrypt: http://www.elider.pl/porady/208/przyklady/przyklad_01.html

Niniejsza porada przedstawia skrypt JS, który pozwala na dołączanie jednym kliknieciem dowolnego kodu html. To samo z ukrywaniem takiego kodu - wystarczy jedno klikniecie.
Sposób przydaje się w celu odśmiecenia strony ze zbyt duzej ilosci informacji.
Nie umieszczamy odrazu wszystkich informacji jako widocznych. Uzytkownik sam sobie klika na to co chce odsłonić.

Oto przykładowy kod, odpowiadający za takie rozwiązanie.

Fragmenty wymagające komentarza zostały opatrzone znakami:

Powyższy kod sprawia, że w określonym miejscu na stronie, pojawia się blok tekstu, wyróżniający się od reszty zawartości strony ramką i kolorem tła. W bloku tym znajduje się tekst, który może być ukrywany przez odwiedzających jak i link służący do kontroli nad działaniem skryptu: w momencie, gdy tekst jest pokazywany, pozwala na jego ukrycia, a gdy jest on niewidoczny, pozwala na jego pokazanie.

A oto objaśnienie do fragmentów kodu:

1 - jest to definicja wyglądu boku tekstu, w którym ma się znajdować ukrywana treść i link ją kontrolujący. Wygląd ten jest zdefiniowany za pomocą kaskadowego arkusza styli (CSS). Wartości parametrów określających wygląd, jak i sam zakres parametrów, mogą być dowolnie modyfikowane, aby ten blok dobrze komponował się z resztą strony.

2 - deklaracja zmiennej, która przechowuje informacje o tym, czy treść jest obecnie pokazywana bądź ukrywana. Przyjmuje wartość 1, gdy treść jest pokazywana lub 0, gdy jest ona ukrywana. Gdy na stronie umieszczamy kilka bloków do ukrycia, najlepiej stworzyć tablicę tego typu zmiennych, w której poszczególny element będzie odpowiadał określonemu blokowi.

3 - funkcja ta jest wywoływana przy kliknięciu w link kontrolny. Bada ona obecną wartość zmiennej kontrolującej wyświetlanie / ukrywanie i na podstawie jej wartości, wywołuje funkcję ukrywającą bądź pokazującą treść. Parametr to argument ID fragmentu (warstwy) ukrywanej / pokazywanej.

4 - funkcja ukrywająca. Jako parametr podaje się argument ID warstwy do ukrycia. Najpierw ukrywa ona tę warstwę, po czym zmienia wartość linku kontrolującego na „Pokaż” i zeruje wartość zmiennej kontrolnej.

5 - funkcja pokazująca. Jako parametr podaje się argument ID warstwy do pokazania. Funkcja najpierw pokazuje żądaną warstwę, po czym zmienia wartość linku kontrolnego na „Ukryj” i ustala wartość zmiennej kontrolnej na 1.

6 - blok tekstu, w którym znajdzie się zarówno ukrywana treść jak i link kontrolujący. Za wygląd tego bloku będzie odpowiadać definicja CSS z punktu 1.

7 - tworzymy warstwę, w której będzie się znajdował link kontrolujący wyświetlanie treści do ukrycia. Na początku ta treść jest wyświetlana, więc link to „Ukryj”

8 - tworzymy warstwę, w której umieszczamy treść do ukrycia.

Działanie niniejszego skryptu zostało poprawnie zweryfikowane na następujących przeglądarkach internetowych:

Przykładowe działanie skryptu: http://www.elider.pl/porady/208/przyklady/przyklad_01.html

Porada napisana na podstawie artykułu: http://republika.onet.pl/2568,34,fabryka.html