SlideUp and SlideDown Formular

CrazyLopp · 01.08.2010

Hallo,

ich bin momentan an einem Forular dran welches ich mit jQuery verfeinern möchte, folgendemaßen sieht mien Code aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Formular mit jQuery</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
        <script type="text/javascript" src="script/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){     
             $("div.a1").click(function(){
                   $("div.u1").slideUp(5000);
             });
             $("div.a1").click(function(){
                $("div.u1").slideDown(5000);
            });
            $("div.a2").click(function(){
                $("div.u2").slideUp(5000);
            });
            $("div.a2").click(function(){
                $("div.u2").slideDown(5000);
            });
            $("div.a3").click(function(){
                $("div.u3").slideUp(5000);
            });
            $("div.a3").click(function(){
                $("div.u3").slideDown(5000);
            });
        });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div class="h1">
                <div class="a1">
                    <p>Kontaktdaten</p>
                </div>
                <div class="u1">
                    <p><b>Bitte Geben Sie Ihre Kontaktdaten ein!</b></p>
                    <br /><br />
                    <label for="vorname">Vorname:</label><br />
                    <input class="k_eingabe" size="30" id="vorname" name="vorname" /><br /><br />
                    <label for="name">Name:</label><br />
                    <input class="k_eingabe" size="30" id="name" name="name" /><br /><br />
                    <label for="email">E-Mail:</label><br />
                    <input class="k_eingabe" size="30" id="email" name="email" /><br /><br />
                </div>
            </div>
            <div class="h2">
                <div class="a2">
                    <p>Nachricht</p>
                </div>
                <div class="u2">
                    <p><b>Bitte tragen Sie Ihre Nachricht ein damit ich weiß um was es geht!</b></p>
                    <br /><br />
                    <label for="nachricht">Nachricht:</label><br />
                    <textarea class="k_eingabe" cols="50" rows="8" id="message" name="message"></textarea> 
                </div>
            </div>
            <div class="h3">
                <div class="a3">
                    <p>Abschicken</p>
                </div>
                <div class="u3">
                    <p><b>Wenn alle Ihre Angaben richtig sind können Sie hier das Formular abschicken!</b></p>
                    <br /><br />
                    <input class="abschicken" id="submit" name="submit" type="submit" value="Absenden" />
                </div>
            </div>
        </div>
    </body>
</html>

Das funktioniert auch alles gut jedoch wenn ich auf die a1 klicke zieht es sich zusammen, aber dann auch wieder sofort auseinander (es soll stehenbleiben beim zusammenziehen)...

Und eine Frage habe ich noch und zwar wie kann ich einstellen das ich beim aufrufen des Formulars alle Reiter ausgeblendet sind also das ich erst auf die Überschrift klicken muss damit Sie mir angezeigt werden kann...

Beste Grüße

cebito · 01.08.2010

AW: SlideUp and SlideDown Formular

CrazyLopp schrieb:
Das funktioniert auch alles gut jedoch wenn ich auf die a1 klicke zieht es sich zusammen, aber dann auch wieder sofort auseinander (es soll stehenbleiben beim zusammenziehen)...

du kannst click nicht zweimal ansprechen und sagen er soll mal das dann aber doch das tun...

HTML:

             $("div.a1").click(function(){
                   $("div.u1").slideUp(5000);
             });
             $("div.a1").click(function(){
                $("div.u1").slideDown(5000);
            });

besser wäre

HTML:

  $("div.a1").click(function () {
    if ($("div.u1").is(":hidden")) {
      $("div.u1").slideDown(5000);
    } else {
      $("div.u1").slideUp(5000);
    }
  });

Christian · 01.08.2010

AW: SlideUp and SlideDown Formular

Das Problem ist, dass Du mehrere Click Events auf einem div hast.

Code:

$("div.a3").click(function(){
    $("div.u3").slideUp(5000);
});
$("div.a3").click(function(){
    $("div.u3").slideDown(5000);
});

Das bedeutet, dass er erst hochscrollt, dann direkt wieder runter, weil beide Funktionen der Reihe nach ausgeführt werden, bei nur einem Klick. Ich hab zwar keine Ahnung von jQuery und auch nicht davon, was Dein Code bewirken soll, aber das hier könnte Deinem Problem helfen:

Code:

<script type="text/javascript">
function _slider(e){
	e.stop();
	/**
	 * false = Beim ersten Klicken wird runtergescrollt, danach abwechselnd
	 * true  = ----------- '' --------- hochgescrollt, ----------''---------
	 */
	if(!this.up) this.up = false;
	
	var t = $('div'+$(this).id.replace('a','u'));
	var amt = 5000;
	
	if(this.up){
		t.slideUp(amt);
	}else{
		t.slideDown(amt);
	}
	this.up = !this.up;
}

$(document).ready(function(){     
    $.each(['a1','a2','a3'],function(){
		$('div.'+this).click(_slider);
    });
});
</script>

Edit, Edit: Cebito, Du hast mein Edit gelöscht! Pfui!
Aber nochmal: Cebitos Lösung ist im Grunde das Selbe wie meins, halt nur mit mehr jQ, nur so zur Info für Dich.

cebito · 01.08.2010

AW: SlideUp and SlideDown Formular

Christian schrieb:
Edit, Edit: Cebito, Du hast mein Edit gelöscht! Pfui!

Kommt vor im Gedränge

hat sich wohl überschnitten

@CrazyLopp - find im Übrigen 5 sek viel zu lange für so ne Animation, da könnten die Leute eher genervt als begeistert reagieren. 1 - 1.5 sek sollten ausreichend sein das Ding auf- bzw. zuzuklappen.

CrazyLopp · 01.08.2010

AW: SlideUp and SlideDown Formular

Vielen dank das Klappt prima

Aber ein kleines Problem habe ich noch und zwar weiß ich jetzt nicht so recht wie ich die Elemente die Ausfahren sollen am Anfang ausblenden kann, sodass ich die erst ausfahren muss damit ich den Inhalt sehen kann...

cebito · 01.08.2010

AW: SlideUp and SlideDown Formular

CrazyLopp schrieb:
Vielen dank das Klappt prima

Aber ein kleines Problem habe ich noch und zwar weiß ich jetzt nicht so recht wie ich die Elemente die Ausfahren sollen am Anfang ausblenden kann, sodass ich die erst ausfahren muss damit ich den Inhalt sehen kann...

HTML:

$(document).ready(function(){
$("div.u1").hide();
$("div.u2").hide();
$("div.u3").hide();

//...hier dann die functions

CrazyLopp · 01.08.2010

AW: SlideUp and SlideDown Formular

Vielen dank Cebito für die Hilfe

Die 5 sec. waren nur ein Test da sich beim zusammeklappen etwas verschoben hat, bis ich dann mal drauf gekommen bin das der Scrollbalken sich ein und ausblendet

Steht nur auf 1000