Div Boxen einblenden

Fragz

Professional

Posts: 256

Wednesday, March 2nd 2011, 6:17pm

Div Boxen einblenden

Hallo,

Ich habe 2 Optionsfelder und Suche nun nach einer Möglichkeit jenachdem welches Optionsfeld angeklickt wurde soll sich eine Div Box Zeigen.

CaptainGerrard8

Beginner

Posts: 6

Wednesday, March 2nd 2011, 7:57pm

Hier ein kleines Beispiel von mir:

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Zeige Radio Buttons</title>
		<script type="text/javascript">
			function changed(value) {
				document.getElementById(value).style.display = "block";
			}
		</script>
	</head>
 
	<body bgcolor="#ffffff">
		<form action="irgendwas.html" method="post" name="form1" target="_self">
		   <label>Zeige Feld 1</label><input name="hersteller" type="radio" onChange="changed(1);"><br>
		   <label>Zeige Feld 2</label><input name="hersteller" type="radio" onChange="changed(2);"><br>
		   <label>Zeige Feld 3</label><input name="hersteller" type="radio" onChange="changed(3);"><br>
		   <br>
		   <input id="1" type="text" name="textfieldName" size="24" value="Feld 1" style="display:none"><br>
		   <input id="2" type="text" name="textfieldName" size="24" value="Feld 2" style="display:none"><br>
		   <input id="3" type="text" name="textfieldName" size="24" value="Feld 3" style="display:none">
		</form>
	</body>
 
</html>

Ist natürlich nicht perfekt, da man die anderen nicht ausblendet, aber es demonstriert die Funktion.

/edit

mit dem Javascript Motion Tween kannst du deine divs dann schön einblenden, siehe hier
http://jstween.blogspot.com/

Grüße

js.spaceher0

Trainee

Posts: 41

Wednesday, March 2nd 2011, 9:19pm

damit gehts,

JavaScript Code

<script type="text/javascript">
function Einblenden() {
document.getElementById('testdiv').style.visibility = 'visible';
}
function Ausblenden() {
document.getElementById('testdiv').style.visibility = 'hidden';
</script>

Fragz

Professional

Posts: 256

Saturday, April 9th 2011, 3:33am

HiHo,

So, nu hab ich wieder etwas Zeit an meiner Privaten HP zu arbeiten.

Wie verwende ich den nun deinen Code

Folgendes habe ich

JavaScript Code

<script type="text/javascript" language="JavaScript">
function toggleElementDisplay(id)
{
	var element = document.getElementById(id);
	var css     = element.style;
	if (css.display == 'block') {
		css.display = 'none';
		return;
	}
	css.display = 'block';
}
</script>

HTML Code

<div class="postbox_container">
		<fieldset>
		<div class="postbox_field">
			<ul class="tblul">
					<input type="radio" name="made_email" onclick="toggleElementDisplay('3');"> {$LANG.FRIEND_EMAIL_TEXT}<br>
    				<input type="radio" name="self_email" onclick="toggleElementDisplay('2');"> {$LANG.SELF_EMAIL_TEXT}<br>
			</ul>
		</div>
	</fieldset>
        <fieldset>
		<div class="postbox_field" id="2" style="display: none;">
			<ul class="tblul">
				<li class="tblli"><b>{$LANG.MESSAGE}:</b></li>
				<li class="tblli">
					<textarea name="post_text" id="post_text" style="min-height:150px; min-width:700px;" ></textarea>
				</li>
			</ul>
		</div>
	</fieldset>
</div>

Klicke ich nun beide Auswahlfelder ein sind beide makiert und diese divbox <div class="postbox_field" id="2" style="display: none;"> ist eingeblendet.
Wie muss ich vorgehen dass sich nicht beide aktivieren lassen und sich der Div nur öffnet wenn ich das letzte radio Feld anklicke?

Szabo

Professional

Posts: 248

Saturday, April 9th 2011, 10:16am

Gibt es mal wieder irgendwo eine vollständige Liveversion (gerne wieder per PN, falls du es nicht öffentlich zeigen willst)? Dann bau ich dir das kurz um