Javascript, aufklappbare Box

#1 andryyy

Auskenner

Gruppe: aktive Mitglieder
Beiträge: 47
Beigetreten: 27. Oktober 10
Reputation: 0
Geschlecht:Männlich

geschrieben 09. November 2010 - 17:15

hallo,
um es kurz zu machen, soweit bin ich jetzt:

http://www.lastnite.de/npp_workdir/

wenn ihr auf das "+" klickt, bleibt es so. es öffnet sich eben nur die box. ich überlege nun, wie ich das "+" als var o.ä. ausgeben kann, damit es aufgeklappt ein "-" ist. dazu mein code:

<script type="text/javascript"><!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>

und im body natürlich

<a onclick="toggle_visibility('boxed');"><h1>+ Registrieren</h1></a>
<div id="boxed" style="display:none;">
// Hier ist die Tabelle
</div>

habe schon versucht in die if-schleife eine var einzugeben und die dann mit document.write auszugeben, aber habe von javascript echt 0 ahnung. :huh:

wie man merkt. hat dazu also jemand eine idee?

danke

Nach oben
Nach oben of the page up there ^

#2 zwutz

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 655
Beigetreten: 17. Juli 07
Reputation: 1
Geschlecht:Männlich

geschrieben 09. November 2010 - 17:54

erstens achte darauf, dass man sich ohne Javascript trotzdem registrieren kann,
zweitens gibts da ein paar mehr spielerein

Also in etwa so:

<html>
<head>
<title>Formular</title>

<style type="text/css">
<!--
...
-->
</style>
<script type="text/javascript">
<!--
function partial(func /*, 0..n args */) {
        var args = Array.prototype.slice.call(arguments, 1);
        return function() {
                var allArguments = args.concat(Array.prototype.slice.call(arguments));
                return func.apply(this, allArguments);
        };
}

function toggle_visibility(id_box) {
        var e = document.getElementById(id_box);
        var plus = document.getElementById("plus");
        if(e.style.display == 'none') {
                e.style.display = 'block';
                plus.innerHTML = '- '; // bäh
        } else {
                e.style.display = 'none';
                plus.innerHTML = '+ '; // bäh
        }
}

window.onload = function() {
        var header = document.getElementById("toogle_link");
        var box = document.getElementById("boxed");
        var plus = document.getElementById("plus");
        plus.innerHTML = '+ '; // geht schöner, aber es geht ums prinzip
        box.style.display = 'none'; // erst durch javascript verstecken, ohne js sieht man es also trotzdem
        header.onclick = partial(toggle_visibility, "boxed");
};
//-->
</script>

</head>
<body>

<h1 id="toogle_link"><span id="plus"></span>Registrieren</h1>
<div id="boxed">
<form method="post" action="write.php"> <!-- form darf nicht innerhalb von table stehen -->
<table>
<tr><td>Username: </td><td><input type="text" name="T_Username" maxlength="12"></td></tr>
<tr><td>Passwort: </td><td><input type="password" name="T_Password" maxlength="12"></td></tr>
<tr><td><input type="submit" name="Button" value="Registrieren"></td></tr>
</table>
</form>
</div>


</body>
</html>