JQUERY - divs auf und zuklappen

sturmi · 03.06.2009, 16:51

Hallo,

ich beschäftige mich noch nicht so lange mit JQUERY und habe daher mal eine kleine Frage. Ich möchte per Klick auf einen Link ein bestimmtes DIV zu 50% zusammenfahren und beim nächsten klick soll es wieder vollständig ausgefahren werden. Hat da jemand eine Idee, wie ich das mit JQUERY schaffe?

Vielen Dank im vorraus.

dex · 03.06.2009, 17:46

Habe keine Erfahrung mit JQUERY, kenne nur Beispiele und da soll das relativ gut realisierbar sein. Geht aber auch mit Javascript. Vielleicht kannst du dich ja da mal schlau machen

Gruß

sturmi · 04.06.2009, 10:59

OK ... das oben einmal am Rande. Ich habe folgenden Code:

PHP-Code:

  $("#href_show").click(function(){

      $("#href_show").addClass("selected");
  
      $("#gallery_img").animate({ 
        height: "500px"
      }, 1500 );
     
      
});

Leider funktioniert das addClass bei mir nicht. Ich möchte das der Link mit der ID #href_show eine Klasse .selected bekommt. Irgendwie funktioniert das nicht richtig. Hat da jemand eine Idee, was ich verkehrt mache?

sturmi · 04.06.2009, 12:11

Hallo,

also jetzt habe ich mal folgenden Code ausprobiert:

PHP-Code:

  $(document).ready(function(){

 
$("a.aufklappen").click(function(){

    

    $("div#gallery_img").animate({ 

        height: "387px"

      }, 1500, function(){$("a#href_show").toggleClass("zuklappen");} );

      

});

 
 
$("a.zuklappen").click(function(){

    

    $("div#gallery_img").animate({ 

        height: "200px"

      }, 1500, function(){$("a#href_show").toggleClass("aufklappen");} );

      

});

});

Beim Klick auf den Link mit der Klasse "aufklappen" wird das DIV auch schön vergrößert und dem Link die Klasse "zuklappen" zugewiesen. Beim nächsten Klick soll es sich wieder auf 200 px verkleinern, klappt aber leider nicht so ganz. Wo ist mein Fehler? Bin für jeden Hinweis sehr dankbar.

phpdummi · 04.06.2009, 13:28

Hi,

ich würde nicht mit toggleClass() sondern mit toggle arbeiten!

PHP-Code:

  $(function () {
    
    $gallery_img = $("div#gallery_img");
    
    $("a.toggle_gallery_img").toggle(
        function () {
            $gallery_img.animate({
                height: $gallery_img.height() / 2
            });
        },
        function () {
            $gallery_img.animate({
                height: $gallery_img.height() * 2
            });
        }
    );
    
});

EDIT: Oder nochmal komplett:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script src="jquery-1.3.2.min.js"></script>
        <script>
        $(function () {
            
            $gallery_img = $("div#gallery_img");
            
            $("a.toggle_gallery_img").toggle(
                function () {
                    $gallery_img.animate({
                        height: $gallery_img.height() / 2
                    });
                },
                function () {
                    $gallery_img.animate({
                        height: $gallery_img.height() * 2
                    });
                }
            );
            
        });
        </script>
        <style>
            div#gallery_img {
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="gallery_img">
            Content
            <a href="#" class="toggle_gallery_img">toggle #gallery_img</a>
        </div>
    </body>
</html>

sturmi · 04.06.2009, 14:23

Jau, danke ... das hatte mir schon sehr weiter geholfen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Koordinaten des Mauszeigers über einer Grafik (Drag&Drop mit jQuery)	anbeck	JavaScript, Ajax und mehr	5	19.01.2009 16:28
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
ausrichtung von divs in divs geht nur im IE	litterauspirna	HTML, Usability und Barrierefreiheit	5	14.10.2008 14:58
[Erledigt] Divs nebeneinander richtig positionieren das sie nicht verschoben werden	litterauspirna	HTML, Usability und Barrierefreiheit	12	09.10.2008 09:04
Thickbox Funktionalität in jQuery	Plague	JavaScript, Ajax und mehr	1	28.07.2008 23:58
[JS] Divs nach Datum sortieren	cycap	JavaScript, Ajax und mehr	24	16.07.2008 18:48
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27

03.06.2009, 16:51
sturmi Neuer Benutzer Registriert seit: 03.06.2009 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	JQUERY - divs auf und zuklappen Hallo, ich beschäftige mich noch nicht so lange mit JQUERY und habe daher mal eine kleine Frage. Ich möchte per Klick auf einen Link ein bestimmtes DIV zu 50% zusammenfahren und beim nächsten klick soll es wieder vollständig ausgefahren werden. Hat da jemand eine Idee, wie ich das mit JQUERY schaffe? Vielen Dank im vorraus.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

03.06.2009, 17:46
dex Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 195	Habe keine Erfahrung mit JQUERY, kenne nur Beispiele und da soll das relativ gut realisierbar sein. Geht aber auch mit Javascript. Vielleicht kannst du dich ja da mal schlau machen Gruß

04.06.2009, 10:59
sturmi Neuer Benutzer Registriert seit: 03.06.2009 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	OK ... das oben einmal am Rande. Ich habe folgenden Code: PHP-Code: `$("#href_show").click(function(){ $("#href_show").addClass("selected"); $("#gallery_img").animate({ height: "500px" }, 1500 ); });` Leider funktioniert das addClass bei mir nicht. Ich möchte das der Link mit der ID #href_show eine Klasse .selected bekommt. Irgendwie funktioniert das nicht richtig. Hat da jemand eine Idee, was ich verkehrt mache? Geändert von sturmi (04.06.2009 um 11:08 Uhr).

04.06.2009, 12:11
sturmi Neuer Benutzer Registriert seit: 03.06.2009 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	Hallo, also jetzt habe ich mal folgenden Code ausprobiert: PHP-Code: `$(document).ready(function(){ $("a.aufklappen").click(function(){ $("div#gallery_img").animate({ height: "387px" }, 1500, function(){$("a#href_show").toggleClass("zuklappen");} ); }); $("a.zuklappen").click(function(){ $("div#gallery_img").animate({ height: "200px" }, 1500, function(){$("a#href_show").toggleClass("aufklappen");} ); }); });` Beim Klick auf den Link mit der Klasse "aufklappen" wird das DIV auch schön vergrößert und dem Link die Klasse "zuklappen" zugewiesen. Beim nächsten Klick soll es sich wieder auf 200 px verkleinern, klappt aber leider nicht so ganz. Wo ist mein Fehler? Bin für jeden Hinweis sehr dankbar.

04.06.2009, 14:23
sturmi Neuer Benutzer Registriert seit: 03.06.2009 Beiträge: 20 PHP-Kenntnisse: Fortgeschritten	Jau, danke ... das hatte mir schon sehr weiter geholfen.