jQuery Div ein/aus sliden

Jazo · 16.03.2009

Hey hab mal nach dieser Seite ein Bischen rumexperimentiert:

Habs auch selber hinbekommen nur hab noch nen paar fragen:

1. Wie bekomme ich es hin das die Div's schon beim laden der Seite versteckt sind und dich erst bei einem Klick öffnen?

2. Gibt es eine Möglichkeit das Script so zu verändern das wenn Div1 mit einem Link1 geöffnet ist, soll sich Div1 bei einem Klick auf Link2 schließen aber gleichseitig soll Div2 geöffnet werden...

Hab mir das in etwa so vorgestellt:
Div1 ist geöffnet,
Klick auf Link2 alle Div's die offen sollen sich schließen,
wenn alle Div's geschlossen sind soll Div2 aufgehen.

Soll dann auch nicht nur bei 2 Div's sondern bei mehren funktionieren z.B. 5

Vllt schaut ihr euch mal meinen kleinen Test an vllt versteht ich es dann besser.

Das jQuery Script sieht bis jetz so aus:

HTML:

  $(document).ready(function(){
    
    $("#link1").click(function () {
      $("#div1").slideToggle("slow");
    });
    $("#link2").click(function () {
      $("#div2").slideToggle("slow");
    });

  });

Gibt halt noch slideDown und slideUp

Die Links werden dann so eingebaut:

HTML:

<a id="link1" href="#">Link1</a>  <a id="link2" href="#">Link2</a>

Hoffe ihr könnt mir helfen Danke schon mal im vorraus

sokie · 16.03.2009

AW: jQuery Div ein/aus sliden

zu 1:

HTML:

<script type="text/javascript">
  $(document).ready(function(){
    $('#div1').hide();
    $('#div2').hide();

    $("#link1").click(function () {
      $("#div1").slideToggle("slow");
    });
    $("#link2").click(function () {
      $("#div2").slideToggle("slow");
    });

  });
</script>

zu2:

HTML:

    $("#link2").click(function () {
      $("#div2").slideToggle("slow");
      $("#div1").hide();
    });

usw...

du kannst schliesslich unter $("#link2").click(function () { soviele anweisungen ausführen wie du magst, auch komplexe funktionen aufrufen, die du selbst definierst.

ps: wo haste das denn her?

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Jazo · 16.03.2009

AW: jQuery Div ein/aus sliden

Danke erstmal

1. Super die Div's sind jetzt beim laden verschwunden
2. Mit dem 2. Code werde ich mal weiter mit rumexperimentieren und testen. Bei weitern Fragen poste ich hier einfach nochmal.
3. Diese Zeile fügt mein MS Expression Web Automatisch bei jeder neuen Seite ein..KA was das überhaupt ist

aber ich lass es einfach immer drin.

Nochmal Vielen Dank bei weiteren Fragen melde ich mich..

Jazo · 16.03.2009

AW: jQuery Div ein/aus sliden

So hab jetz mal 5 Div's und 5 Links erstellt und mein Script so umgeschrieben:

HTML:

<script type="text/javascript">
$(document).ready(function(){
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
    $('#div5').hide();
    $("#link1").click(function () {
      $("#div5").slideUp("slow", function() {
       $("#div1").slideDown("slow"); 
      });
   });
    $("#link2").click(function () {
      $("#div1").slideUp("slow", function() {
       $("#div2").slideDown("slow"); 
      });
     }); 
    $("#link3").click(function () {
      $("#div2").slideUp("slow", function() {
       $("#div3").slideDown("slow"); 
      });
     }); 
    $("#link4").click(function () {
      $("#div3").slideUp("slow", function() {
       $("#div4").slideDown("slow"); 
      });
     }); 
    $("#link5").click(function () {
      $("#div4").slideUp("slow", function() {
       $("#div5").slideDown("slow"); 
      });
    });
 });
</script>

Und siehe es geht auch halbwegs. Es gibt nur ein Problem ich hab es erstmal so gamcht das man nur Durchblättern kann also von 1-5 nur wenn jetz z.B Box 5 auf ist und ich auf Box 3 will öffnen sich beide

Habs dann mal so versucht das bei einem klick nicht nur eine Box geschlossen wird sondern alle auser die die geöffnet werden soll.

sah dann so aus:

HTML:

    $("#link1").click(function () {
      $("#div5","#div4","#div3","#div2").slideUp("slow", function() {
       $("#div1").slideDown("slow"); 
      });
   });

Nur leider geht das nicht in der Praxis ich weiß gar nicht ob man die Div's in Javascript so aufzählen darf?? Bin noch neuling!

Hab's auch mal so probiert:

HTML:

    $("#link1").click(function () {
     $("#div2").slideUp("slow");
     $("#div3").slideUp("slow");
     $("#div4").slideUp("slow");
     $("#div5").slideUp("slow", function() {
       $("#div1").slideDown("slow"); 
      });
   });

Geht aber auch nicht -.-

Aber i-wie muss das doch auch anders zu lösen sein?? Ich bräuchte nochmal eure Hilfe..

LowkaZ · 16.03.2009

AW: jQuery Div ein/aus sliden

hab hier was ganz einfaches für MooTools gebaut mit CSS Klasse und graceful degradation

Habs auch noch für jQuery... müsst ich nur raussuchen...

Jazo · 16.03.2009

AW: jQuery Div ein/aus sliden

Hey Danke aber das ist ein wenig zu simpel glaub ich für mich da sich das Div ja beim Klick wecheseln soll mit deinem Script bin ich denk ich mal auch nicht viel weiter

sokie · 16.03.2009

AW: jQuery Div ein/aus sliden

glaub ich auch nicht*g*

mit etwas mehr Struktur wäre es einfacher.
ich hab zum testen die Divs in einen Container gepackt, damit man sie gemeinsam auswählen, sie bei onklick erstmal alle zu verstecken, und nur das Element anzuzeigen, dass zu dem entsprecheneden Link gehört.

HTML:

<p>
<a id="link1" href="#">Link1</a> | 
<a id="link2" href="#">Link2</a> |
<a id="link3" href="#">Link3</a> | 
<a id="link4" href="#">Link4</a> |
<a id="link5" href="#">Link5</a>
</p>
<div id="menu">
<div id="div1">
    Hier steht i-was drine<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box1<br />

    -<br />
    -<br />
    -</div>
<div id="div2">
    Hier steht i-was drine<br />
    -<br />
    -<br />

    --<br />
    -<br />
    Box2<br />
    -<br />
    -<br />
    -</div>

<div id="div3">
    Hier steht i-was drine<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box3<br />

    -<br />
    -<br />
    -</div>
<div id="div4">
    Hier steht i-was drine<br />
    -<br />
    -<br />

    --<br />
    -<br />
    Box4<br />
    -<br />
    -<br />
    -</div>

<div id="div5">
    Hier steht i-was drine<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box5<br />

    -<br />
    -<br />
    -</div>
</div>

dabei habe ich auch die Stile rausgenommen, da die divs ja durch die ID ausreichen selektiert werden können:

Code:

<style type="text/css">
#menu div {
    border-style: solid;
    border-width: 1px;
    padding: 1px 4px;
  width: 180px;
  height: 180px;
}
#div1 {
    background-color: #00FFFF;
}
#div2 {
    background-color: #00FF00;
}
#div3 {
    background-color: #FFFF00;
}
#div4 {
    background-color: #FF00FF;
}
#div5 {
    background-color: #FF0000;
}
</style>

das script sieht so aus:

HTML:

$(document).ready(function(){
      $('#menu div').hide();

      $('#link1').click(function(){
        $('#menu div').hide('slow');
        $('#div1').slideDown('slow');
      })
      $('#link2').click(function(){
        $('#menu div').hide('slow');
        $('#div2').slideDown('slow');
      })
      $('#link3').click(function(){
        $('#menu div').hide('slow');
        $('#div3').slideDown('slow');
      })
      $('#link4').click(function(){
        $('#menu div').hide('slow');
        $('#div4').slideDown('slow');
      })
      $('#link5').click(function(){
        $('#menu div').hide('slow');
        $('#div5').slideDown('slow');
      })
  });

vielleicht schaust du dir dazu auch die API Referenz zu jquery einmal an zB die Selektoren

Bitte kostenlos registrieren, damit du die Links siehst.

die sind den css selektoren sehr ähnlich.
zB wält man per $('#menu div') alle divs aus, die Kindelemente von #menu sind, und kann sie so alle verstecken, ohne dafür jedes einzelne selektieren und verstecken zu müssen.

Jazo · 17.03.2009

AW: jQuery Div ein/aus sliden

Hey Danke ich habs jetz entlich so hinbekomme wie ichs haben will!
Das script is zwar etwas umständlich und lang aber Hauptsache es geht!

So siehts aus:

Code:

$(document).ready(function(){
    $('#menu div').hide();

    $("#link1").click(function () {
     $("#menu #div2").slideUp("slow", function() {
      $("#menu #div3").slideUp("slow", function() {
       $("#menu #div4").slideUp("slow", function() {
        $("#menu #div5").slideUp("slow", function() {
         $("#div1").slideDown("slow"); 
          });
       });
      });    
     });
    });   
    
    $("#link2").click(function () {
     $("#menu #div1").slideUp("slow", function() {
      $("#menu #div3").slideUp("slow", function() {
       $("#menu #div4").slideUp("slow", function() {
        $("#menu #div5").slideUp("slow", function() {
         $("#div2").slideDown("slow"); 
          });
       });
      });    
     });
    });   
    
    $("#link3").click(function () {
     $("#menu #div1").slideUp("slow", function() {
      $("#menu #div2").slideUp("slow", function() {
       $("#menu #div4").slideUp("slow", function() {
        $("#menu #div5").slideUp("slow", function() {
         $("#div3").slideDown("slow"); 
          });
       });
      });    
     });
    });   
    
    $("#link4").click(function () {
     $("#menu #div1").slideUp("slow", function() {
      $("#menu #div2").slideUp("slow", function() {
       $("#menu #div3").slideUp("slow", function() {
        $("#menu #div5").slideUp("slow", function() {
         $("#div4").slideDown("slow"); 
          });
       });
      });    
     });
    });   
    
    $("#link5").click(function () {
     $("#menu #div1").slideUp("slow", function() {
      $("#menu #div2").slideUp("slow", function() {
       $("#menu #div3").slideUp("slow", function() {
        $("#menu #div4").slideUp("slow", function() {
         $("#div5").slideDown("slow"); 
          });
       });
      });    
     });
    });
 });

mann kann es je später extern auslagern damit es übersichtlicher wird.

Danke für all eure Hilfe XD