## Ukrywanie fragmentów strony

Skrypt jest bardzo przydatny, gdy piszemy strone z różnymi przykładami. Wówczas, przykłady takie można schować i pokazać je dopiero po wciśnieciu jakiegoś przycisku. Zwiększa to czytelność takiej strony, gdyż użytkownik nie musi się przebijać przez dziesiątki linijek przykładów czy kodów źródłowych. Oby uzyskać taki efekt, w ramach HEAD wstawiamy:

    <script type="text/javascript" language="javascript"><!--
    // Copyright (c) May 2002 by Michał Nazarewicz (mina86@tlen.pl)
    // Idea by Michał Jazłowiecki (michalj@prioris.mini.pw.edu.pl)
    // This software is free; It's distributed under terms of GNU General Public License

    var theDoc=document, theAll=(theDoc.all)?theDoc.all:null;
    function ShowHideLayer(name, state) {
    	if (theAll==null) return;
    	if (arguments.length<2) state=theAll[name].style.display=="none";
    	theAll[name].style.display=(state)?"block":"none";
    }
    function ButtonClick(but, name, desc1, desc2) {
    	var state=but.value==desc1;
    	but.value=(state)?desc2:desc1;
    	ShowHideLayer(name,!state);
    }
    function addShowHideButton(name, desc1, desc2, state) {
    	if (theAll==null) return;
    	theDoc.write('<form><input type="button" value="'+(state?desc1:desc2)+
    	'" onclick="ButtonClick(this, \''+name+'\',\''+desc1+'\',\''+desc2+'\');" /></form>');
    }
    //--></script>

Następnie przed każdym fragmentem który mamy zamiar ukryć:

    <script language="javascript" type="text/javascript"><!--
    addShowHideButton("nazwa", "opis1", "opis2", stan_poczatkowy);
    //--></script>
    <div id="nazwa">

nazwa oznacza nazwe obszaru, który chcemy ukryć. Może to być dowolny napis składający się z liter, cyfr i znaków podkreślenia, pryczym nie może zaczynać się od cyfry. Dodatkowo, nazwy nie mogą się powtarzać. Proponuję tworzenie nazw typu: "Zrodlo1Layer", czy "Przyklad1Layer". Koncowka "Layer", zwiększy czytelność kodu, gdyż wówczas bedzie wiadomo, że mamy do czynienia z warstwą.

opis1 i opis2 to teksty pokazujące się na przycisku odpowiednio, gdy warstwa jest pokazana i ukryta. Po ukryciu lub pokazaniu warstwy, napis na przycisku się zmienia.

stan_poczatkowy określa, czy na początku obszar ma być widoczny, czy nie. Jeśli tak, to przyjmuje on wartość `true`, a jeśli nie `false`.

Po całym obszarze, który chcemy ukryć, wstawiamy kod:

    </div">

i jeżeli, chcemy aby na początku warstwa była ukryta jeszcze ten kod:

    <script language="javascript" type="text/javascript"><!--
    ShowHideLayer("nazwa",false);
    //--></script>

A oto przykład:

    <script language="javascript" type="text/javascript"><!--
    addShowHideButton("Code1Layer", "Ukryj kod", "Pokaż kod", true);
    //--></script>
    <div id="Code1Layer"><pre>
    &lt;script type="text/javascript" language="javascript"&gt;&lt;!--
    // Copyright (c) May 2002 by Michał Nazarewicz (mina86@tlen.pl)
    // Idea by Michał Jazłowiecki (michalj@prioris.mini.pw.edu.pl)
    // This software is free; It's distributed under terms of GNU General Public License

    var theDoc=document, theAll=(theDoc.all)?theDoc.all:null;
    function ShowHideLayer(name, state) {
    	if (theAll==null) return;
    	if (arguments.length&lt;2) state=theAll[name].style.display=="none";
    	theAll[name].style.display=(state)?"block":"none";
    }
    function ButtonClick(but, name, desc1, desc2) {
    	var state=but.value==desc1;
    	but.value=(state)?desc2:desc1;
    	ShowHideLayer(name,!state);
    }
    function addShowHideButton(name, desc1, desc2, state) {
    	if (theAll==null) return;
    	theDoc.write('&lt;form&gt;&lt;input type="button" value="'+(state?desc1:desc2)+
    	'" onclick="ButtonClick(this, \''+name+'\',\''+desc1+'\',\''+desc2+'\');" /&gt;&lt;/form&gt;');
    }
    //--&gt;&lt;/script&gt;
    </pre></div>

Niestety, na razie skrypt działa tylko pod Microsoft Internet Explorerem 4.0+. Jeżeli ktos ma jakikolwiek pomysł, jak można przenieść skrypt na Netscape Communicatora, Netscape'a czy Operę, proszony jest o pilny kontakt z autorem skryptu, Michałem Nazarewiczem.