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: 659
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>

geht schöner, aber das prinzip sollte klar sein

Raise your glass if you are wrong