[Erledigt] Mit checkbox textarea ausblenden und andere textarea vergrössern

[Forumsgast]

Hallo zusammen!
Wir wisst bin ich in JavaScript nicht wirklich gut dabei
habe im Augenblick folgendes Problem, das ich irgendwie nicht lösen kann.

Ausgangslage:

Mach eins: <input type="checkbox" name="macheins" /> <br /><br />
<textarea style="width:600px;height:200px;" name="textarea01">
TEXT IN AREA1
</textarea>
&nbsp;
<textarea style="width:600px;height:200px;" name="textarea02">
TEXT IN AREA1
</textarea> 

Nun möchte ich, dass wenn die checkbox gecheckt wird, die textarea02 ausgeblendet wird und die textarea01 doppelt so breit wird (1200px)
Wenn man nun die checkbox wieder "decheckt" müssen wieder beide textareas vorhanden sein und beide 600px breit sein.
Könnt ihr mir helfen?

[Forumsgast]

habs jetzt mal so gemacht:

<script language="JavaScript" type="text/javascript"> <!--
function hide() {
if(document.getElementById)
document.getElementById("textarea02").style.visibility = "hidden";
document.getElementById("textarea01").style.width = "1200px";
}
//--> </script>


Mach eins: <input type="checkbox" name="macheins" onClick="javascript:hide()" /> <br /><br />
<textarea style="width:600px;height:200px; display:block;" name="textarea01" id="textarea01" >
TEXT IN AREA1
</textarea>
&nbsp;
<textarea style="width:600px;height:200px;" name="textarea02" id="textare02" >
TEXT IN AREA1
</textarea> 

Doch wenn ich die checkbox "deselektiere" kommt nicht mehr der Initial Stand zurück, wie krieg ich das hin?

EDIT:
Muss ich das mit 2 Checkboxen machen?
Gibt es kein "onDeselect" ??

[Forumsgast]

In der hide Funktion den .checked Status der Checkbox abfragen und danach die entspr. Aktion ausführen

[Forumsgast]

habs jetzt mal so

<script language="JavaScript" type="text/javascript"> <!--
function hide() {
    if(document.getElementById){
        if(document.getElementById("textarea01").style.width == "600px"){
            document.getElementById("textarea02").style.visibility = "hidden";
            document.getElementById("textarea01").style.width = "1200px";
        }
        if(document.getElementById("textarea01").style.width == "1200px"){
            document.getElementById("textarea02").style.visibility = "";
            document.getElementById("textarea01").style.width = "600px";        
        }
    }
}
//--> </script>


Mach eins: <input type="checkbox" name="macheins" onClick="javascript:hide()" /> <br /><br />
<textarea style="width:600px;height:200px;" name="textarea01" id="textarea01" >
TEXT IN AREA1
</textarea>
&nbsp;
<textarea style="width:600px;height:200px;" name="textarea02" id="textare02" >
TEXT IN AREA1
</textarea> 

doch wenn ich die checkbox anklicke / checke passiert rein gar nichts ?!

[Forumsgast]

Naja logisch. Weil es beide Aktionen nacheinander ausführt. Habe doch in #3 geschrieben, wies geht. Das fehlt noch in der Funktion

if (document.getElementsByName('macheins')[0].checked) ...

[Forumsgast]

habs so gelöst:

<script language="JavaScript" type="text/javascript"> <!--
function hide() {
    if(document.getElementById){
        if(document.getElementById("textarea01").style.width == "600px"){
            document.getElementById("textarea02").style.visibility = "hidden";
            document.getElementById("textarea01").style.width = "1200px";
            return;
        }
        if(document.getElementById("textarea01").style.width == "1200px"){
            document.getElementById("textarea02").style.visibility = "";
            document.getElementById("textarea01").style.width = "600px";   
            return;     
        }
    }
}
//--> </script>


Mach eins: <input type="checkbox" name="macheins" onClick="javascript:hide()" /> <br /><br />
<textarea style="width:600px;height:200px;" name="textarea01" id="textarea01" >
TEXT IN AREA1
</textarea>
&nbsp;
<textarea style="width:600px;height:200px;" name="textarea02" id="textare02" >
TEXT IN AREA1
</textarea> 

[Forumsgast]

Dabei hast Du aber die Checkbox nur als Umschalter, nicht als an-/aus. Wenn Du textarea1 mal per CSS 1200px zuordnest, wird sich das Verhalten umkehren.

[Forumsgast]

Vorschlag:

function hide(chk) {
    if(document.getElementById){
        if(chk){
            document.getElementById("textarea02").style.visibility = "hidden";
            document.getElementById("textarea01").style.width = "1200px";
        }
        else {
            document.getElementById("textarea02").style.visibility = "";
            document.getElementById("textarea01").style.width = "600px";   
        }
    }
}


... 

Mach eins: <input type="checkbox" name="macheins" onClick="javascript:hide(this.checked)" /> <br /><br />

[Forumsgast]

jop stimmt, wird aber (in diesem Fall) definitiv nicht der Fall sein. Die Textarea muss anfangs 600px sein ;D

[Forumsgast]

das verhalten bleibt bei meiner sowie bei deiner funktion das selbe (wenn als initialwert 1200px) angegeben wird.
in beiden fällen muss in der JS Funktion der Wert angepasst werden

[Forumsgast]

Ja, wenn das CSS nicht wie oben erwähnt geändert wird. Ich würde sowieso zu einem anderen Vorgehen raten. Siehe dazu
Inhalt ein- und ausblenden - PHP.de Wiki