twocoders.de
 

programme/javascript/divausblenden/divausblenden.html


1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Adobe GoLive" />
        <title>Elemente verstecken</title>
        
        <script language="javascript" type="text/javascript">
        var index=0;
        function verstecken(name)
        {
            document.getElementById(name).style.display = "none";
        }
        function zeigen(name)
        {
            document.getElementById(name).style.display = "block";
        }
        function versteckenzeigen (name)
        {
            if(document.getElementById(name).style.display == "none")
            {
                document.getElementById(name).style.display = "block";
                document.formname.hideshowbutton.value = "verstecken";
            }
            else
            {
                document.getElementById(name).style.display = "none";
                document.formname.hideshowbutton.value = "zeigen";
            }
        }
        </script>
    </head>

    <body>
        <form id="formname" name="formname" method="post" action="#">
            <div id="kasten1">
            Der text der hier drin steht, l&auml;sst sich durch diesen Button verstecken: <input type="button" name="hidebutton" onclick="verstecken('kasten1')" value="verstecken" /><br /><br />
            Da dieser Text und der Button in einem Div stehen, verschwindet auch der Button, wenn man ihn bet&auml;tigt. Hier kann beliebig viel stehen, da es kein Limit f&uuml;r ein Div-Element gibt. So kann zum Beispiel ein Anmeldeformular nach der Anmeldung einfach versteckt werden. Ein Problem gibt es, wenn der Browser ein Textbrowser ist, da dann die "Style-Elemente" nicht wirken, mithilfen denen hier der Div versteckt wird.
            </div>
            <br />
            <br />
            <input type="button" name="hidebutton2" onclick="zeigen('kasten1')" value="wieder anzeigen" />
            <br />
            <br />
            Button der beides kann (verstecken/zeigen): <input type="button" name="hideshowbutton" onclick="versteckenzeigen('kasten1')" value="verstecken" />
        </form>
    </body>

</html>