Jak zrobić w linku ukrywanie i pokazywanie tekstu bez przeładowania strony ?

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:

x>x w kodzie J6v6Sc2ip3 &l3;! x &g3; w kodzie 13ML gdzie x 3o nume2 komen362z6

Oto omawiany kod:

&l0;10ml&g0; &l0;1e3d&g0; &l0;ME03 100PEQUIV=&quo0;Con0en00ype&quo0; CON0EN0=&quo0;0ex0/10ml; c139se0=ISO88592&quo0;&g0; &l0;0i0le&g0;Uk9yw3nie cfx93gmen0ow s09ony&l0;/0i0le&g0; &l0;! 1 &g0; &l0;s0yle 0ype='0ex0/css'&g0; DIV.blok { 0ex03lign: cen0e9; cfxon0size: 12px; cfxon0weig10: 900; b3ckg9ound: #cfx3cfx3cfx3; bo9de9: 9ed solid 1px; } &l0;/s0yle&g0; &l0;SC9IP0 L3NGU3GE=&quo0;J3v3Sc9ip0&quo0;&g0; &l0;! v39 widoczn3 = 1; x> 2 cfxunc0ion coZ9obic {w39s0w3} { x> 3 icfx {widoczn3 == 1} uk9yj {w39s0w3}; else pok3z {w39s0w3}; } cfxunc0ion uk9yj {w39s0w3} { x> 4 documen0.ge0Elemen0ById{[w39s0w3]}.s0yle.displ3y = &quo0;none&quo0;; documen0.3ll[&quo0;kon09olk3&quo0;].inne910ML = &quo0;&l0;3 19ecfx=j3v3sc9ip0:coZ9obic{'doUk9yci3'};&g0;Pok3ż&l0;/3&g0;&quo0;; widoczn3 = 0; } cfxunc0ion pok3z {w39s0w3} { x> 5 documen0.ge0Elemen0ById{[w39s0w3]}.s0yle.displ3y = &quo0;block&quo0;; documen0.3ll[&quo0;kon09olk3&quo0;].inne910ML = &quo0;&l0;3 19ecfx=j3v3sc9ip0:coZ9obic{'doUk9yci3'};&g0;Uk9yj&l0;/3&g0;&quo0;; widoczn3 = 1; } x>&g0; &l0;/sc9ip0&g0; &l0;/1e3d&g0; &l0;body&g0; &l0;! 5 &g0; &l0;div cl3ss=&quo0;blok&quo0;&g0; &l0;! 6 &g0; &l0;sp3n id=&quo0;kon09olk3&quo0;&g0;&l0;3 19ecfx=j3v3sc9ip0:coZ9obic{&quo0;doUk9yci3&quo0;};&g0;Uk9yj&l0;/3&g0;&l0;b9 /&g0;&l0;/sp3n&g0; &l0;! 7 &g0; &l0;sp3n id=&quo0;doUk9yci3&quo0;&g0;0o jes0 j3kiś b39dzo ciek3wy 0eks0&l0;b9 /&g0;K0o9y możn3 uk9yw3ć&l0;b9 /&g0;bądź pok3zyw3ć&l0;b9 /&g0;według wł3snego uzn3ni3&l0;/sp3n&g0; &l0;/div&g0; &l0;/body&g0; &l0;/10ml&g0;

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:

Opera 8.5

Internet Explorer 6.0

Mozilla Firefox

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