Div mit einem Radiobutton einblenden und mit einem anderen ausblenden

[ro-mann]

Hallo!

Ich will mit dem Click auf einen Radiobutton ein Div einblenden und das klappt auch:

$(document).ready(function(){
       
       $("#extra").css("display","none");

       $("#box1").click(function(){
       
        if ($("#box1").is(":checked"))
        {
            $("#extra").show("fast");
        }
        else
        {     
            $("#extra").hide("fast");
        }
      });
   
    });

Allerdings brauche ich noch 2 Funktionen, die ich nicht hinbekommen:

• Das Div soll bei Klicken auf einen anderen Radiobutton wieder verschwinden.
• Wenn man den Radiobutton "box1" bei ausgefahrenem Div nochmal anklickt, schließt es sich und wird erneut ausgefahren, wie kann man das verhindern?

Vielen Dank!

 

[weedo]

Hi,

wie man so schön sagt: Viele Wege führen nach Rom. Ich benutze in solchen Fällen gern Variablen, da ich diese auch besser auslesen kann um meinen Fehler zu finden.

Ich habe dir mal fix einen kleinen Codeschnippsel zusammen geschrieben der bei meinem Test auch wunderbar funktioniert hat.

$(document).ready(function() {
        var box1bool = false;
        $("#box1").click(function() {
          if(box1bool == false) {
            $("#extra").show("fast");
            box1bool = true;
          }
        });
        $("#box2").click(function() {
          if(box1bool == true) {
            $("#extra").hide("fast");
            box1bool = false;
          }
        });
      });

Solltest du Fragen dazu haben, stell sie einfach und ich werde dir antworten, sobald es mir möglich ist =)

lg Weedo

 

[ro-mann]

Super, danke!

Allerdings erscheinen beim Laden alle divs, dann muss ich einmal auf box1 klicken, dann funktioniert es erst:

jQuery Accordion Style DIV Menu


Code neu ist dein Code, das Div darüber ist mein Code.

 

[ro-mann]

Super, danke!

Allerdings erscheinen beim Laden alle divs, dann muss ich einmal auf box1 klicken, dann funktioniert es erst:

http://testseiten.te.ohost.de/example.htm


Code neu ist dein Code, das Div darüber ist mein Code.

 

[kkapsner]

@weedo: Vergleiche mit == sind zu vermeiden. Verwende lieber === bzw. !==. Aber hier ist der Vergleich sowieso unnötig, da man ja gleich

if (box1bool){}

bzw.

if (!box1bool){}

schreiben kann.

Aber ich finde solche Sachen mit Variablen eher unpraktisch, da es schnell mal passieren kann, dass man die Checkbox irgendwo anders ändert und dann die Variable das falsche speichert.

In jQuery kann man recht gut überprüfen, ob ein Element sichtbar ist:

$(document).ready(function(){
	var extra = $("#extra");
	var box1 = $("#box1");
	extra.css("display","none");
	$("#box1, #box2").click(function(){
		if (box1.is(":checked")){
			if (!extra.is(":visible")){
				extra.show("fast");
			}
		}
		else {
			if (extra.is(":visible")){
				extra.hide("fast");
			}
		}
	});
});

- ungetestet.