[JS] Ein-/Ausblenden von "Containern"

[traffic]

Hallo,

bin leider ein absoluter Neuling in Sachen JavaScript.
Habe mich schon bissle eingelesen jedoch bekomme ich das Einblenden
von sogenannten "Containern" nicht hin.


Ich habe eine checkbox mit onClick versehen und wollte ich eingentlich getElementById("example").style.visibility = "visible"; benutzen, jedoch alles was ich geschrieben habe war kompletter unsinn

Kann mir da vielleicht jemand weiterhelfen?

Gruß

 

[Johnson]

Hi,

so funktioniert es:

<input type="checkbox" onclick="javascript:document.getElementById('example').style.visibility = 'visible';">Einblenden
<br /><br />

<div id="example" style="visibility:hidden;">
    (Un-)sichtbarer Content ...
</div>

 

[traffic]

Hi,

so funktioniert es:

<input type="checkbox" onclick="javascript:document.getElementById('example').style.visibility = 'visible';">Einblenden
<br /><br />

<div id="example" style="visibility:hidden;">
    (Un-)sichtbarer Content ...
</div>

danke funktioniert mit text

jedoch leider nicht, wenn im in div-bereich steht:

<tr><td>content</td></tr>

kann das sein?

 

[Johnson]

danke funktioniert mit text

jedoch leider nicht, wenn im in div-bereich steht:

<tr><td>content</td></tr>

kann das sein?

Funktioniert im FF zumindest einwandfrei ... Und ich persönlich wüsste auch keinerlei Grund, wieso das nicht klappen sollte.

<input onclick="javascript:document.getElementById('example').style.visibility = 'visible';" type="checkbox">Einblenden
<input onclick="javascript:document.getElementById('example').style.visibility = 'hidden';" type="checkbox">Ausblenden<br /><br />
<div id="example" style="visibility:visible;">
<table><tr><td>content</td></tr></table>
</div>

 

[traffic]

Funktioniert im FF zumindest einwandfrei ... Und ich persönlich wüsste auch keinerlei Grund, wieso das nicht klappen sollte.

<input onclick="javascript:document.getElementById('example').style.visibility = 'visible';" type="checkbox">Einblenden
<input onclick="javascript:document.getElementById('example').style.visibility = 'hidden';" type="checkbox">Ausblenden<br /><br />
<div id="example" style="visibility:visible;">
<table><tr><td>content</td></tr></table>
</div>

danke, muß die ganze table im div haben

jedoch ist nun dort, wo der der text ausgeblendet wird ne freie stelle in der höhe des ausgeblendenen textes...kann man dies auch wegbekommen?

habs schon mit height:0px probiert, geht leider nicht

 

[Renegade]

Hi,

Du musst einfach bei den Containern das Display Atriibut auf none setzen.

document.getElementById('example').style.display = 'none';

 

[traffic]

Hi,

Du musst einfach bei den Containern das Display Atriibut auf none setzen.

document.getElementById('example').style.display = 'none';

super vielen vielen dank euch beiden


nur ne kleinigkeit noch, wenn man nun das häckchen setzt, dann wird der container ja sichtbar gibt es auch die möglichkeit, wenn man das häckchen weg macht, dass der container dann wieder verschwindet?

 

[Johnson]

super vielen vielen dank euch beiden

Kein Problem

nur ne kleinigkeit noch, wenn man nun das häckchen setzt, dann wird der container ja sichtbar gibt es auch die möglichkeit, wenn man das häckchen weg macht, dass der container dann wieder verschwindet?

Jap, das geht ... Einfach immer die Funktion changeDisplay( id ) aufrufen:

function changeDisplay( id ) {
   if(document.getElementById(id).style.display== "none") 
      // Anzeigen
   else
      // Verstecken

   return true;
}

 

[traffic]

Kein Problem



Jap, das geht ... Einfach immer die Funktion changeDisplay( id ) aufrufen:

function changeDisplay( id ) {
   if(document.getElementById(id).style.display== "none") 
      // Anzeigen
   else
      // Verstecken

   return true;
}

funktioniert leider nicht...muß da nicht irgendwo example rein?

 

[Johnson]

funktioniert leider nicht...muß da nicht irgendwo example rein?

Du musst die Funktion dann wie folgt aufrufen:

<input type = .... onclick="javascript:changeDisplay('example');" />

und in der Funktion noch die Kommentare durch den entsprechenden Code ersetzen (der Gleiche wie sonst auch, nur mit der Variable id statt 'example').

 

[traffic]

Du musst die Funktion dann wie folgt aufrufen:

<input type = .... onclick="javascript:changeDisplay('example');" />

und in der Funktion noch die Kommentare durch den entsprechenden Code ersetzen (der Gleiche wie sonst auch, nur mit der Variable id statt 'example').

super vielen dank!!!!

 

[paddya]

Besser wäre aber der dafür gedachte Eventhandler onchange.

Desweiteren braucht man kein javascript: im Eventhandler.

Greetz

paddya

 

[Johnson]

Besser wäre aber der dafür gedachte Eventhandler onchange.

Logisch vertretbar und zulässig laut w3c ist beides. Also inwiefern besser? Logischer vielleicht ja

Desweiteren braucht man kein javascript: im Eventhandler.[...]

Stimmt, das ist nur für Verweise interessant, danke!

 

[paddya]

Es kann ja sein, dass die Checkbox bereits am Anfang "gechecked" ist (z.B. macht das Firefox sehr gerne wenn man ein Formular neu lädt). Deshalb sollte man eher auf den "checked"-Status prüfen als auf die Sichtbarkeit des Containers. Sonst kann es schnell passieren, dass der Container sichtbar ist, obwohl die Checkbox "unchecked" ist. Klar geht das auch mit onclick, aber onchange ist bei Formularfeldern einfach schöner

Greetz

paddya