Jnnbo: Div ein und ausblenden

0 48

Div ein und ausblenden

Jnnbo
  • jquery
  1. 0
    dedlfix
    1. 0
      Jnnbo
      1. 0
        dedlfix
    2. 0
      Gunnar Bittersmann
  2. 0
    Gunnar Bittersmann
    • barrierefreiheit
    • jquery
    1. 0
      Gunnar Bittersmann
      1. 0
        Jnnbo
        1. 0
          Gunnar Bittersmann
          1. 0
            Jnnbo
            1. 0
              Gunnar Bittersmann
              • jquery
    2. 0
      Jnnbo
      1. 1
        Gunnar Bittersmann
        1. 0
          Jnnbo
          1. 0
            dedlfix
            1. 0
              Jnnbo
              1. 0
                dedlfix
                1. 0
                  Jnnbo
                  1. 0
                    Jnnbo
                    1. 0

                      Zusatzfrage

                      Jnnbo
                      • jquery
                      1. 0
                        dedlfix
                        1. 0
                          Jnnbo
                          1. 0
                            Jnnbo
                            1. 0

                              attr

                              Jnnbo
                              1. 0
                                Jnnbo
                                1. 0

                                  Zweite Function wird nicht ausgeführt

                                  Jnnbo
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      Jnnbo
                                      1. 0
                                        Gunnar Bittersmann
                                        1. 0
                                          Jnnbo
                                          1. 0

                                            Eine Lösung?

                                            Jnnbo
                                            1. 0
                                              dedlfix
                                              1. 0
                                                Jnnbo
                                                1. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    Jnnbo
                                                  2. 0
                                                    robertroth
                                                  3. 0
                                                    dedlfix
                                                2. 0
                                                  dedlfix
                                                  1. 0
                                                    Jnnbo
                                                    1. 0
                                                      dedlfix
                    2. 0
                      Gunnar Bittersmann
                      1. 0
                        Jnnbo
                        1. 0
                          Gunnar Bittersmann
                          • javascript
              2. 0
                Gunnar Bittersmann
                • jquery
                1. 0
                  Jnnbo
    3. 0
      dedlfix
  3. 0
    Gunnar Bittersmann
    • css
    • html
    • javascript
    1. 0
      Gunnar Bittersmann

Moin,

jQuery ist absolut nicht meine stärke. Ich habe folgende kleine Funktion:

$(".fa-plus").click(function(){
	$(".insert_erinnerung").slideToggle(); 
}); 

Klicke ich auf

<h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>

wird

<div class="insert_erinnerung">

eingeblendet.

Ich möchte das ganze allerdings gerne herumdrehen, wenn ich die Seite aufrufe soll es ausgeblendet sein, mit einem Klick soll es erst einblenden. Außerdem wäre schön wenn ich das fa-plus nach einem Klick in fa-minus-square geändert bekommen würde.

Hat jemand eine Idee oder ein Stück fertigen Code? Bin für alles dankbar.

  1. Tach!

    Ich möchte das ganze allerdings gerne herumdrehen, wenn ich die Seite aufrufe soll es ausgeblendet sein, mit einem Klick soll es erst einblenden.

    Also display:none als Grundeinstellung. Und beim click dein Toggle ausführen. Das ist doch das von dir gewünschte Ein-/Ausblenden?

    Außerdem wäre schön wenn ich das fa-plus nach einem Klick in fa-minus-square geändert bekommen würde.

    removeClass() und addClass()

    dedlfix.

    1. Hallo dedlfix,

      Also display:none als Grundeinstellung. Und beim click dein Toggle ausführen. Das ist doch das von dir gewünschte Ein-/Ausblenden?

      Ok, das hat geklappt, danke für den Hinweis.

      removeClass() und addClass()

      Habe ich eingesetzt:

      $(".fa-plus").click(function(){
      	$(".insert_erinnerung").slideToggle();
      	$("span").removeClass("fa fa-plus"); 
      	$("span").addClass("fa fa-minus-square"); 
      }); 
      

      Wäre es möglich, wenn ich das wieder zuklappen lasse, dass dann das Icon wieder gewechselt wird, also auf den Ausgangspunkt? Und die letzte Frage, kann ich den Text:

      <h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>
      

      ebenfalls ändern lassen?

      1. Tach!

        Habe ich eingesetzt:

        $(".fa-plus").click(function(){
        	$(".insert_erinnerung").slideToggle();
        	$("span").removeClass("fa fa-plus"); 
        	$("span").addClass("fa fa-minus-square"); 
        }); 
        

        So eher nicht. Dein $('span') selektiert sämtliche span-Elemente. Für den Moment mag das passend sein, aber das wird bestimmt nicht das einzige span im gesamten Dokument bleiben. DU musst bei den Selektoren so spezifisch sein wie beim CSS. Einzelne Elemente lassen sich besser über einen id-Selektor ansprechen. Wenn du ein solches als Rahmen-Element hat (vielleicht das h3), dann kannst du mit .find('span') die Kinder mit wählen und muss nicht mit $(...) wieder das gesamte DOM absuchen.

        Also

        <h3 id='toggleReminder'>...</h3>
        
        var $toggleReminder = $('#toggleReminder');
        $toggleReminder.click(...);
        $toggleReminder.find('span').toggleClass(...);
        

        Vorausgesetzt, das span ist das einzige innerhalb des #toggleReminder.

        Wäre es möglich, wenn ich das wieder zuklappen lasse, dass dann das Icon wieder gewechselt wird, also auf den Ausgangspunkt?

        Ja, dann wie schon vorgeschlagen toggleClass(). Aber auch nur fa-plus und fa-minus-square, das fa kann unangetastet bleiben.

        Und die letzte Frage, kann ich den Text:

        <h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>
        

        ebenfalls ändern lassen?

        Ja, aber jQuery kann den Textnode nicht ansprechen. Ein .text('...') auf dem h3 wirft das span weg. Also noch ein span mit Klasse oder Id um den Text zum gezielten Ansprechen, und das Icon-Span muss auch spezifischer ansprechbar sein / angesprochen werden. Also in dem oberen Beispiel nicht .find('span') sondern .find('.fa') oder .find('span.fa') oder du gibst dem noch eine Klasse icon und dann .find('.icon'). Der Möglichkeiten gibt es viele.

        dedlfix.

    2. @@dedlfix

      removeClass() und addClass()

      Wohl eher toggleClass().

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@Jnnbo

    Klicke ich auf <h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>

    Da kannst du vielleicht raufclicken; andere nicht.

    Das span wäre gern ein button (mit aussagekräftiger Beschriftung!), damit man das auch per Tastatur anwählen und auslösen kann.

    Ich möchte das ganze allerdings gerne herumdrehen, wenn ich die Seite aufrufe soll es ausgeblendet sein, mit einem Klick soll es erst einblenden.

    .insert_erinnerung { display: none }, wo war das Problem?

    Außerdem wäre schön wenn ich das fa-plus nach einem Klick in fa-minus-square geändert bekommen würde.

    Du möchtest nicht $('.fa-plus'), sondern $('.fa') selektieren und in der Funktion auch die Klassen "fa-plus" und "fa-minus-square" togglen.

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar Bittersmann

      Klicke ich auf <h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>

      Da kannst du vielleicht raufclicken; andere nicht.

      Das span wäre gern ein button (mit aussagekräftiger Beschriftung!), damit man das auch per Tastatur anwählen und auslösen kann.

      Außerdem: Warum soll nur das inhaltslose Element (vermute mal, das bekommt ein Icon als Hintergrundbild?) clickbar sein, nicht auch die Beschriftung „Erinnerung hinzufügen“?

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hallo Gunnar,

        Außerdem: Warum soll nur das inhaltslose Element (vermute mal, das bekommt ein Icon als Hintergrundbild?) clickbar sein, nicht auch die Beschriftung „Erinnerung hinzufügen“?

        habe ich geändert

        $("h3").click(function(){
        	$(".insert_erinnerung").slideToggle();
        	$("span").removeClass("fa fa-plus"); 
        	$("span").addClass("fa fa-minus-square"); 
        }); 
        
        1. @@Jnnbo

          habe ich geändert

          $("h3").click(function(){
          	$(".insert_erinnerung").slideToggle();
          	$("span").removeClass("fa fa-plus"); 
          	$("span").addClass("fa fa-minus-square"); 
          }); 
          

          Nein. Du möchtest nicht, dass ein click auf jede h3-Überschrift das Umschalten aller .insert_erinnerung-Elemente auslöst.

          Außerdem ist bei dir immer noch nichts, was per Tastatur bedienbar (kurz gesagt: bedienbar) wäre.

          Nachtrag: Warum fasst du die Klasse "fa" an? Warum nimmst du sie weg, um sie gleich danach wieder hinzuzufügen?

          LLAP

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Hallo Gunnar,

            Nachtrag: Warum fasst du die Klasse "fa" an? Warum nimmst du sie weg, um sie gleich danach wieder hinzuzufügen?

            also meinst du so?

            $(".erinnerung").click(function(){
            	$(".insert_erinnerung").slideToggle();
            	$(".fa ").removeClass("fa-plus"); 
            	$(".fa ").addClass("fa-minus-square"); 
            }); 
            
            1. @@Jnnbo

              also meinst du so?

              Nein, eher so.

              Wobei auch sämtliche Hinweise, dass deine Selektore zu unspezifisch sind, zutreffen. Über kurz oder lang (eher kurz) fliegt dir der Kram sonst um die Ohren.

              LLAP

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Hallo Gunnar,

      Das span wäre gern ein button (mit aussagekräftiger Beschriftung!), damit man das auch per Tastatur anwählen und auslösen kann.

      ich kann leider kein Button nehmen, wenn ich diesen einsetzte, dann möchte dieser das komplette Formular abschicken und das ist nicht Sinn der Sache.

      1. @@Jnnbo

        Das span wäre gern ein button (mit aussagekräftiger Beschriftung!), damit man das auch per Tastatur anwählen und auslösen kann.

        ich kann leider kein Button nehmen, wenn ich diesen einsetzte, dann möchte dieser das komplette Formular abschicken und das ist nicht Sinn der Sache.

        Doch, das kannst du.

        type="submit" ist Default für Buttons in Formularen. Wenn du keinen Submit-Button haben willst: <button type="button">.

        (Und wenn du wirklich keinen Button nehmen kannst, dann <span role="button" tabindex="0">.)

        Aber du kannst einen Button nehmen.

        Mit Beschriftung! Das heißt: Icon und Beschriftung sind Teil des Buttons.

        LLAP

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo Gunnar,

          type="submit" ist Default für Buttons in Formularen. Wenn du keinen Submit-Button haben willst: <button type="button">. Mit Beschriftung! Das heißt: Icon und Beschriftung sind Teil des Buttons.

          Ok, habe ich geändert und es funktioniert

          <button type="button" class="erinnerung"><span class="fa fa-plus"></span> Erinnerung hinzufügen</button>
          <div class="insert_erinnerung">
          

          Meine jQuery Funktion habe ich angepasst

          $(".erinnerung").click(function(){
          	$(".insert_erinnerung").slideToggle();
          	$("span").removeClass("fa fa-plus"); 
          	$("span").addClass("fa fa-minus-square"); 
          }); 
          

          jetzt muss ich nur noch schaffe, dass wenn ich das wieder zuklicke, das Symbol geändert wird. Mit deinem Vorschlag toogleClass, komme ich irgendwie nicht weiter, hab dieses Beispiel gefunden

          1. Tach!

            jetzt muss ich nur noch schaffe, dass wenn ich das wieder zuklicke, das Symbol geändert wird. Mit deinem Vorschlag toogleClass, komme ich irgendwie nicht weiter,

            In der jQuery-Dokumentation stsht, dass man eine oder mehrere Klassen mit Leerzeichen getrennt angeben kann, also .toggleClass('fa-plus fa-minus-square').

            dedlfix.

            1. Hallo dedlfix,

              In der jQuery-Dokumentation steht, dass man eine oder mehrere Klassen mit Leerzeichen getrennt angeben kann, also .toggleClass('fa-plus fa-minus-square').

              vielen Dank, genau so passt es

              $(".erinnerung").click(function(){
              	$(".insert_erinnerung").slideToggle();
              	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
              }); 
              

              Jetzt muss ich noch den Text ändern, ich habe gelesen dass man in jQuery auch text verwenden kann um einen Text innerhalb von <p> ändern kann.

              <button type="button" class="erinnerung"><span class="fa fa-plus"></span> Erinnerung hinzufügen</button>
              

              Wäre es dann nicht möglich mein Text innerhalb von <p> zu setzten und diesen dann ändern zu lassen?

              1. Tach!

                Jetzt muss ich noch den Text ändern, ich habe gelesen dass man in jQuery auch text verwenden kann um einen Text innerhalb von <p> ändern kann.

                Das beschränkt sich nicht nur auf p-Elemente.

                Wäre es dann nicht möglich mein Text innerhalb von <p> zu setzten und diesen dann ändern zu lassen?

                Wohl eher nicht, weil p die falsche Auszeichnung ist. Das ist kein Textabsatz. Nimm span, oder du findest ein Element mit spezifischerer Bedeutung, was auf den Fall passt.

                dedlfix.

                1. Hallo dedlfix,

                  Wohl eher nicht, weil p die falsche Auszeichnung ist. Das ist kein Textabsatz. Nimm span, oder du findest ein Element mit spezifischerer Bedeutung, was auf den Fall passt.

                  ok, das hat funktioniert nun jetzt habe ich auch hier wieder das Problem, dass ich den Text beim zufahren geändert werden sollte:

                  <button type="button" class="erinnerung"><span class="fa fa-plus"></span> <span class="text">Erinnerung hinzufügen</span></button>
                  
                  $(".erinnerung").click(function(){
                  	$(".insert_erinnerung").slideToggle();
                  	$(".text").text("Doch nicht");
                  	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                  }); 
                  
                  1. Hallo dedlfix,

                    ich habe etwas gefunden:

                    $(".erinnerung").click(function(){
                    	$(".insert_erinnerung").slideToggle();
                    	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                    			
                    	var $el = $(".text");
                                $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                    }); 
                    
                    1. Hallo,

                      ist es möglich in meinen Code

                      $(".erinnerung").click(function(){
                      	$(".insert_erinnerung").slideToggle();
                      	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                      			
                      	var $el = $(".text");
                                  $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                      }); 
                      

                      etwas einzubauen wenn ich das Feld wieder zuklicke, dass das Feld

                      <input type="text" name="datum" id="datepicker" required>
                      

                      geleert wird?

                      1. Tach!

                        ist es möglich in meinen Code etwas einzubauen wenn ich das Feld wieder zuklicke, dass das Feld

                        <input type="text" name="datum" id="datepicker" required>
                        

                        geleert wird?

                        Mit .val() spricht man den Wert in input-Elementen an. Das geht lesend (ohne Parameter) und schreibend.

                        dedlfix.

                        1. Hallo dedlfix,

                          Mit .val() spricht man den Wert in input-Elementen an. Das geht lesend (ohne Parameter) und schreibend.

                          ok, verstehe. Allerdings verstehe ich nicht, wie ich .val() in meine Funktion einbauen soll, denn es darf ja nur geleert werden, wenn ich wieder auf den Button klicke, sprich wenn ich das DIV schließe.

                          $(".erinnerung").click(function(){
                          	$(".insert_erinnerung").slideToggle();
                          	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                          			
                          	var $el = $(".text");
                                      $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                          }); 
                          
                          1. Hallo dedlfix,

                            ich habe eine Idee, da wie ich finde die Funktion immer größer wird. Wäre es nicht einfacher wenn ich auf den Button ".erinnerung" klicke, eine Class auszuschauen, wenn ich wieder drauf klicke, wird eine andere Funktion ausgeführt?

                            1. Hallo dedlfix,

                              ich wollte meine Funktion noch ein required hinzufügen

                              $(".erinnerung").click(function(){
                              	$(".insert_erinnerung").slideToggle();
                              	$("input").attr("required", true);
                              	$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                              	var $el = $(".text");
                                          $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                              }); 
                              

                              Mein Problem, jetzt haben alle Felder required, ich benötige dieses nur bei

                              <input type="text" name="datum" id="datepicker" class="kalender">
                              

                              Ich dachte ich könnte es so machen:

                              $(".kalender").attr("required", true);
                              

                              geht aber leider nicht. Außerdem bekomme ich auch hier wieder das Problem, wie kann ich die Zuweisung löschen, wenn ich das das DIV wieder schließe?

                              EDIT: OK, es geht so

                              $("#datepicker").attr("required", true);
                              

                              jetzt nur noch das Problem mit dem löschen bei Klick zu.

                              1. Hallo,

                                es klappt absolut nicht. Ich weiß schon, warum ich jQuery einfach nur hasse. Dachte ich kann es so umsetzten:

                                $(".erinnerung").click(function(){
                                	$(".insert_erinnerung").slideDown( "slow", function() {
                                	$("#datepicker").attr("required", true);
                                	$(".fa ").removeClass("fa-plus"); 
                                        $(".fa ").addClass("fa-minus-square"); 			
                                        $(".erinnerung").switchClass("erinnerung", "xxxx"); 			
                                			
                                	var $el = $(".text");
                                       	    $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                   });
                                		
                                }); 
                                
                                $(".xxxx").click(function(){
                                	$(".insert_erinnerung").slideDown( "slow", function() {
                                	$("#datepicker").attr("required", true);
                                	$(".fa ").removeClass("fa-minus-square"); 
                                        $(".fa ").addClass("fa-plus"); 			
                                
                                        $(".xxxx").switchClass("xxxx", "erinnerung"); 			
                                			
                                	var $el = $(".text");
                                       	    $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                   });
                                		
                                }); 
                                

                                Die zweite Funktion wird allerdings überhaupt nicht beachtet. :/

                                1. Moin,

                                  ich verstehe es einfach nicht. In jedem Youtube Video wo ich mir angeschaut habe, geht diese Funktion ohne Probleme nur bei mir nicht :/

                                  $('.erinnerung').stop().click(function(e){ einblenden(e) });
                                  $('.erinnerung1').stop().click(function(e){ ausblenden(e) });
                                  	
                                  		
                                  function einblenden(e) {
                                  	$(".insert_erinnerung").slideDown();
                                  	$("#moin").switchClass("erinnerung", "erinnerung1"); 
                                  		};
                                  	
                                  function ausblenden(e) {
                                  	alert("The paragraph was clicked.");
                                  		};
                                  

                                  Dieses wird noch ausgeführt "function einblenden(e)" aber der wechsel geht leider nicht mehr, aber diesen benötige ich ganz dringend.

                                  1. @@Jnnbo

                                    $('.erinnerung').stop().click(function(e){ einblenden(e) });
                                    $('.erinnerung1').stop().click(function(e){ ausblenden(e) });
                                    

                                    Die Eventhandler werden registriert für Elemente, die zu diesem Zeitpunkt den jeweiligen Klassen angehören. Die Events bleiben für diese Elemente registriert, auch wenn sie zu einem späteren Zeitpunkt nicht mehr diesen Klassen angehören.

                                    Für Elemente, die zum Zeitpunt der Registrierung nicht diesen Klassen angehören, werden keine Events registriert, auch wenn Elemente später diesen Klassen angehören sollten.

                                    Heißt: Wenn du die Klasse eines Elements von erinnerung auf erinnerung1 änderst, wird beim Click darauf immer noch die Funktion einblenden() aufgerufen, nicht ausblenden().

                                    Und überhaupt:

                                    	$("#moin").switchClass("erinnerung", "erinnerung1"); 
                                    

                                    switchClass()? Kann ich in der Doku nicht finden.

                                    LLAP

                                    --
                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                    1. Hallo Gunnar,

                                      Für Elemente, die zum Zeitpunt der Registrierung nicht diesen Klassen angehören, werden keine Events registriert, auch wenn Elemente später diesen Klassen angehören sollten.

                                      Heißt: Wenn du die Klasse eines Elements von erinnerung auf erinnerung1 änderst, wird beim Click darauf immer noch die Funktion einblenden() aufgerufen, nicht ausblenden().

                                      Dann weiß ich auch nicht mehr weiter :/

                                      switchClass()? Kann ich in der Doku nicht finden.

                                      Doch, die gibt es http://api.jqueryui.com/switchclass/

                                      1. @@Jnnbo

                                        Heißt: Wenn du die Klasse eines Elements von erinnerung auf erinnerung1 änderst, wird beim Click darauf immer noch die Funktion einblenden() aufgerufen, nicht ausblenden().

                                        Dann weiß ich auch nicht mehr weiter :/

                                        Dann war das wohl keine so brauchbare Idee.

                                        switchClass()? Kann ich in der Doku nicht finden.

                                        Doch, die gibt es http://api.jqueryui.com/switchclass/

                                        Das musst du schon dazusagen, was du alles so für Bibliotheken einbindest.

                                        LLAP

                                        --
                                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                        1. Hallo Gunnar,

                                          Dann war das wohl keine so brauchbare Idee.

                                          nein war es nicht, aber ich weiß nicht was ich sonst noch machen soll. Ich bin jetzt 5 Stunden an 10 Zeilen JS Code.

                                          Das musst du schon dazusagen, was du alles so für Bibliotheken einbindest.

                                          jQuery und jQuery Ui

                                          1. Moin,

                                            ich glaube ich habe es, was sagt ihr dazu?

                                            		$(".erinnerung").click(function(){
                                            			
                                            			$(".erinnerung").toggleClass('opened');
                                            				
                                            				
                                            			var isVisible = $( '.erinnerung' ).is( ".opened" );
                                            
                                            			if (isVisible === true ){
                                            				$(".insert_erinnerung").slideToggle();
                                            				$("#datepicker").attr("required", true);
                                            				$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                                            
                                            			}
                                            		
                                            			else {
                                            				$(".insert_erinnerung").slideToggle();
                                            				$("#datepicker").removeAttr("required", true);
                                            				$(".fa ").toggleClass('fa-plus fa-minus-square'); 
                                            			}   
                                            								
                                            				var $el = $(".text");
                                            					$el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                            	
                                            		}); 
                                            

                                            Mein Test bei

                                            <input type="text" name="datum" id="datepicker" class="kalender">
                                            

                                            war soweit ich gesehen habe, erfolgreich. Gibt es noch eine einfachere und übersichtlichere Lösung?

                                            1. Tach!

                                              ich glaube ich habe es, was sagt ihr dazu?

                                              Wenn du mehrfach auf dasselbe Element zugreifen möchtest, erstell eine Variable, dann muss es nicht mehrfach im DOM gesucht werden. Für jQuery gibts eine Konvention, dass ein solcher Element-Wrapper (Verweis auf ein HTML-Element oder eine Gruppe davon) mit $ anfängt. (Kann man befolgen, muss man aber nicht zwingend.)

                                              var $erinnerung = $(".erinnerung");

                                              Und dann $erinnerung statt $(".erinnerung") verwenden.

                                              isVisible ist gut benannt, ohne $ vorn, weil das nur ein boolescher Wert ist und kein jQuery-Wrapper. Allerdings brauchst du diesen Wert nur ein einziges Mal, so dass eine Variable überflüssig ist. Der Vergleich kann direkt im if notiert werden.

                                              Innerhalb des if und else hast du jeweils 2 Zeilen, die exakt denselben Inhalt haben. Die werden also in jedem Fall auf gleiche Weise ausgeführt und können somit auch außerhalb notiert sein. Wenn du hingegen darauf Wert legst, dass sie in jedem Zweig nicht einfach nur irgendwie umschalten sondern wirklich in die vorgesehene Richtung, egal was vorher für ein Zustand war, dann solltest du die toggle-Zeilen durch Ein- beziehungsweise Ausschalter ersetzen.

                                              Das Wechseln des Textes kannst du nun auch in das if-else verlagern (und entsprechend umschreiben), denn der ist ja auch vom auf/zu-Zustand abhängig.

                                              Und dann wolltest du ja noch bei einer der beiden Bedingungen den Wert vom Input auf Leerstring setzen. Das sollte vielleicht auch noch hinzugefügt werden.

                                              Außerdem war da noch Gunnars Einwand, dass der Text nicht ins Javascript soll. In dem Fall solltest du dir nochmal seine Antwort raussuchen und den Umschalter in zwei Ausführungen erstellen, für jeden Zustand einen, und dann schaltest du nur noch einfach in den anderen Zustand, ohne jedes Element einzeln umzuschalten.

                                              dedlfix.

                                              1. Hallo dedlfix,

                                                danke für deine sehr ausführliche Antwort,

                                                Wenn du mehrfach auf dasselbe Element zugreifen möchtest, erstell eine Variable, dann muss es nicht mehrfach im DOM gesucht werden. Für jQuery gibts eine Konvention, dass ein solcher Element-Wrapper (Verweis auf ein HTML-Element oder eine Gruppe davon) mit $ anfängt. (Kann man befolgen, muss man aber nicht zwingend.)

                                                var $erinnerung = $(".erinnerung"); Und dann $erinnerung statt $(".erinnerung") verwenden.

                                                Ich hoffe ich habe dich richtig verstanden, hab mein Code etwas angepasst, vielleicht kannst du ja nochmals drüber schauen

                                                	$(".erinnerung").click(function(){
                                                			
                                                			var $erinnerung = $(".erinnerung");
                                                			var $insert_erinnerung = $(".insert_erinnerung");
                                                			var $fa = $(".fa ");
                                                			
                                                			$erinnerung.toggleClass('opened');
                                                				
                                                
                                                			if ($erinnerung.is( ".opened" ) === true ){
                                                				
                                                				$insert_erinnerung.slideToggle();
                                                				$("#datepicker").attr("required", true);
                                                				
                                                				$fa.removeClass("fa-plus"); 
                                                        		        $fa.addClass("fa-minus-square");  
                                                
                                                			}
                                                		
                                                			else {
                                                				
                                                				$insert_erinnerung.slideToggle();
                                                				$("#datepicker").removeAttr("required", true);
                                                				$('#datepicker').val('');
                                                				$('#nachricht').val('');
                                                				
                                                				$fa.removeClass("fa-minus-square"); 
                                                        		        $fa.addClass("fa-plus"); 			}   
                                                								
                                                				var $el = $(".text");
                                                			            $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                                	
                                                		}); 
                                                

                                                isVisible ist gut benannt, ohne $ vorn, weil das nur ein boolescher Wert ist und kein jQuery-Wrapper. Allerdings brauchst du diesen Wert nur ein einziges Mal, so dass eine Variable überflüssig ist. Der Vergleich kann direkt im if notiert werden.

                                                Ok, dieses habe ich auch entfernt und direkt in im if notiert (siehe oben)

                                                Innerhalb des if und else hast du jeweils 2 Zeilen, die exakt denselben Inhalt haben. Die werden also in jedem Fall auf gleiche Weise ausgeführt und können somit auch außerhalb notiert sein. Wenn du hingegen darauf Wert legst, dass sie in jedem Zweig nicht einfach nur irgendwie umschalten sondern wirklich in die vorgesehene Richtung, egal was vorher für ein Zustand war, dann solltest du die toggle-Zeilen durch Ein- beziehungsweise Ausschalter ersetzen.

                                                Ich habe die "toggleClass" Funktion entfernt und dafür "removeClass" bzw. "addClass" verwendet.

                                                Und dann wolltest du ja noch bei einer der beiden Bedingungen den Wert vom Input auf Leerstring setzen. Das sollte vielleicht auch noch hinzugefügt werden.

                                                Diese zwei Optionen habe ich auch hinzugefügt:

                                                $('#datepicker').val('');
                                                $('#nachricht').val('');
                                                

                                                Außerdem war da noch Gunnars Einwand, dass der Text nicht ins Javascript soll. In dem Fall solltest du dir nochmal seine Antwort raussuchen und den Umschalter in zwei Ausführungen erstellen, für jeden Zustand einen, und dann schaltest du nur noch einfach in den anderen Zustand, ohne jedes Element einzeln umzuschalten.

                                                Ich habe mir Gunnars Posting nochmals angesehen, allerdings verstehe ich noch immer nicht genau, wie er das mit beiden Texte im Button vorstellt, ich möchte ja immer nur einen sehe. Leider hat er mir darauf keine Antwort mehr gegeben.

                                                1. @@Jnnbo

                                                  Wenn du mehrfach auf dasselbe Element zugreifen möchtest, erstell eine Variable, dann muss es nicht mehrfach im DOM gesucht werden. Ich hoffe ich habe dich richtig verstanden

                                                  	$(".erinnerung").click(function(){
                                                  			
                                                  			var $erinnerung = $(".erinnerung");
                                                  			var $insert_erinnerung = $(".insert_erinnerung");
                                                  			var $fa = $(".fa ");
                                                  

                                                  Nicht so richtig. Du suchst immer noch die Element bei jedem Click erneut aus dem DOM.

                                                  Damit das nicht passiert, sollten die Zuweisungen an die Variablen außerhalb der Eventhandlerfunktion stehen.

                                                  Außerdem war da noch Gunnars Einwand, dass der Text nicht ins Javascript soll. Ich habe mir Gunnars Posting nochmals angesehen, allerdings verstehe ich noch immer nicht genau, wie er das mit beiden Texte im Button vorstellt, ich möchte ja immer nur einen sehe.

                                                  Die span-Elemente mit den Beschriftungen erhalten unterschiedliche Klassen, deren Sichtbarkeit du umschaltest, sodass jeweils eine Beschriftung sintbar, die andere unsichtbar ist.

                                                  Leider hat er mir darauf keine Antwort mehr gegeben.

                                                  Wochenendarbeit wird doppelt bezahlt! ;-) Bin dabei, was vorzubereiten. Stay tuned. Heute abend oder morgen.

                                                  LLAP

                                                  --
                                                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                  1. Hallo Gunnar,

                                                    Nicht so richtig. Du suchst immer noch die Element bei jedem Click erneut aus dem DOM. Damit das nicht passiert, sollten die Zuweisungen an die Variablen außerhalb der Eventhandlerfunktion stehen.

                                                    Ok, ich verstehe, also würde der Aufbau dann so aussehen

                                                    var $erinnerung = $(".erinnerung");
                                                    var $insert_erinnerung = $(".insert_erinnerung");
                                                    var $fa = $(".fa ");
                                                    
                                                    $(".erinnerung").click(function(){
                                                    						
                                                    $erinnerung.toggleClass('opened');
                                                    [.....]
                                                    

                                                    Habe ich jetzt aber nicht das Problem dass die jQuery auf allen Seiten eine Class mit dem Namen "erinnerung" sucht? Diese existiert natürlich nicht überall. Würde ja für mich bedeuten mit PHP zu prüfen, bin ich auf eintragen.php, wenn ja dann führe diesen Code aus, wenn nicht dann lass es bitte. Ich schreibe JS an den Fuß der Seite der auf allen Seiten eingebunden wird.

                                                    Wochenendarbeit wird doppelt bezahlt! ;-) Bin dabei, was vorzubereiten. Stay tuned. Heute abend oder morgen.

                                                    Das war ja auch gar nicht böse gemeint :/ Ich wollte damit nur sagen, ich habe deine Nachricht gelesen, bin nur noch nicht weiter gekommen :)

                                                  2. Liebe Mitdenker, liebe Wissende, liebe Neugierige,

                                                    Nicht so richtig. Du suchst immer noch die Element bei jedem Click erneut aus dem DOM.

                                                    Das ist aber richtig so!

                                                    Wer sagt Dir denn, dass die Elemente beim nächsten Event (Click) noch da sind? Da könnte doch an anderer Stelle im Dokument ein anderes Modul dafür gesorgt haben, dass das Element gar nicht mehr existiert. Es ist dasselbe Dokument, aber nicht derselbe Event.

                                                    Spirituelle Grüße
                                                    Euer Robert
                                                    robert.r@online.de

                                                    --
                                                    Möge der wahre Forumsgeist ewig leben!
                                                  3. Tach!

                                                    	$(".erinnerung").click(function(){
                                                    			
                                                    			var $erinnerung = $(".erinnerung");
                                                    			var $insert_erinnerung = $(".insert_erinnerung");
                                                    			var $fa = $(".fa ");
                                                    

                                                    Nicht so richtig. Du suchst immer noch die Element bei jedem Click erneut aus dem DOM.

                                                    Damit das nicht passiert, sollten die Zuweisungen an die Variablen außerhalb der Eventhandlerfunktion stehen.

                                                    Auch das Nach-Außen-Verlagern löst das Problem nicht vollständig. Mindestens das .fa wird voraussichtlich noch an anderen Stellen des Dokuments vorkommen. Und dort soll es nicht mitselektiert werden. Besser im Element bleiben und nur dessen Kinder suchen. Es mag für den Augenblick als geeignete Lösung erscheinen, aber das hat für die Zukunft Nebenwirkungen, die einem dann um die Ohren fliegen, meist ohne dass man sich erinnert, dass die Ursche dort zu finden ist.

                                                    Das Suchen in dem/den Elementbereichen lässt sich zwar auch irgendwie auf einmalig reduzieren, aber das erfordert, dass man die Referenzen irgendwo im Element ablegt und darauf zugreift. Das wird alles nur unnötig komplex, so dass mir find()s, die sowieso nur einen kleinen Bereich durchsuchen, der bessere Kompromiss ist.

                                                    dedlfix.

                                                2. Tach!

                                                  	$(".erinnerung").click(function(){
                                                  			
                                                  			var $erinnerung = $(".erinnerung");
                                                  			var $insert_erinnerung = $(".insert_erinnerung");
                                                  			var $fa = $(".fa ");
                                                  

                                                  Bist du sicher, dass du in diesem Click-Handler sämtliche .erinnerung, sämtliche .insert_erinnerung und sämtliche .fa des gesamten Dokuments ansprechen möchtest und nicht nur diejenigen unterhalb des geklickten Erinnerungs-Elements? Ansonsten wäre es besser statt $erinnerung ein

                                                  var $this = $(this);
                                                  

                                                  anzulegen und davon ausgehend die anderen (Nachfahren-)Elemente mit .find(...) zu suchen. Beispielsweise wäre $fa dann $this.find('.fa'). - Im Eventhandler zeigt this auf das auslösende Element und $(this) macht daraus ein jQuery-Objekt.

                                                    		$insert_erinnerung.slideToggle();
                                                  

                                                  Kommt immer noch doppelt vor, kann nach außerhalb des if-else.

                                                    		$("#datepicker").removeAttr("required", true);
                                                  

                                                  removeAttr() will nur einen Parameter haben.

                                                    		var $el = $(".text");
                                                    	            $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                                  

                                                  Den Text kannst du ja auch in Abhängigkeit des if-else setzen und muss dafür keine Extrawurst braten. (Auch hier besser .find() verwenden.)

                                                  Ich habe mir Gunnars Posting nochmals angesehen, allerdings verstehe ich noch immer nicht genau, wie er das mit beiden Texte im Button vorstellt, ich möchte ja immer nur einen sehe. Leider hat er mir darauf keine Antwort mehr gegeben.

                                                  Er meint, du sollst zwei Elemente/Container anlegen, eins für den einen Fall, eins für den anderen Fall, inklusive deren Kinder und Texte in fertiger Ausführung, und dann nur die Sichtbarkeit umschalten. Heb dir die jetzige Lösung auf, die funktioniert ja wenigstens und dann kannst du mal das probieren.

                                                  dedlfix.

                                                  1. Hallo dedlfix,

                                                    ich habe meinen Code nochmals etwas angepasst

                                                    		$(".erinnerung").click(function(){
                                                    			
                                                    			var $erinnerung = $(".erinnerung");
                                                    			var $insert_erinnerung = $(".insert_erinnerung");
                                                    			var $fa = $(".fa ");
                                                    			
                                                    			$erinnerung.toggleClass('opened');
                                                    			$insert_erinnerung.slideToggle();
                                                    
                                                    			if ($erinnerung.is( ".opened" ) === true ){
                                                    				
                                                    				$("#datepicker").attr("required", true);
                                                    				
                                                    				$fa.removeClass("fa-plus"); 
                                                            		        $fa.addClass("fa-minus-square");  
                                                    
                                                    			}
                                                    		
                                                    			else {
                                                    				
                                                    				$("#datepicker").removeAttr("required");
                                                    				$('#datepicker').val('');
                                                    				$('#nachricht').val('');
                                                    				
                                                    				$fa.removeClass("fa-minus-square"); 
                                                            		$fa.addClass("fa-plus");
                                                    			}   
                                                    								
                                                    				var $el = $(".text");
                                                    				    $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");
                                                    	
                                                    		}); 
                                                    

                                                    Bist du sicher, dass du in diesem Click-Handler sämtliche .erinnerung, sämtliche .insert_erinnerung und sämtliche .fa des gesamten Dokuments ansprechen möchtest und nicht nur diejenigen unterhalb des geklickten Erinnerungs-Elements? Ansonsten wäre es besser statt $erinnerung ein var $this = $(this);

                                                    Dieses habe ich leider noch überhaupt nicht verstanden. Hab zwar in vielen Beispielen das $this schon gesehen, allerdings weiß ich nicht so recht, wie und wo ich es in meinem Code anwenden soll.

                                                    Natürlich möchte ich z.B. die fas nur innerhalb von "insert_erinnerung" ansprechen, sonst könnte ich vielleicht später ein Problem mit meiner Navigation bekommen, da es auch dort fas geben wird.

                                                    1. Tach!

                                                      var $this = $(this);

                                                      Dieses habe ich leider noch überhaupt nicht verstanden. Hab zwar in vielen Beispielen das $this schon gesehen, allerdings weiß ich nicht so recht, wie und wo ich es in meinem Code anwenden soll.

                                                      Ein Eventhandler ist nicht zwingend nur auf einem Element aufgesetzt. Wenn du mit jQuery mehrere Elemente selektierst - beispielsweise alle buttons: $('button') - und darauf einen Eventhandler registrierst $('button').click(handler), wie erfährst du dann innerhalb des Handlers, welcher Button konkret geklickt wurde? Innerhalb des Event-Handlers steht this zur Verfügung und das ist eine Referenz auf das DOM-Objekt, das das Event ausgelöst hat. this referenziert hier also einen der Buttons.

                                                      Nun möchtest du aber den Komfort von jQuery nutzen und nicht nur mit den Möglichkeiten der im Browser vorhandenen Javascript-Implementation arbeiten und dazu muss das nackige this in den jQuery-Anzug gesteckt werden: $(this). Und das Ergebnis legt man in irgendeiner Variable ab, damit man nicht bei jeder Verwendung das this neu ankleiden muss. Das $this ist eine der Schreibweisen, die sich als Quasi-Standard herausgebildet haben.

                                                      Natürlich möchte ich z.B. die fas nur innerhalb von "insert_erinnerung" ansprechen, sonst könnte ich vielleicht später ein Problem mit meiner Navigation bekommen, da es auch dort fas geben wird.

                                                      Deswegen ausgehend vom this/$this oder einem anderen geeigneteren Container-Element (der Button (oder was auch immer) kann ja auch außerhalb des zu ändernden Bereiches liegen) mit find() suchen, dann findet es nur die „Innereien“.

                                                      dedlfix.

                    2. @@Jnnbo

                      $el.text($el.text() == "Doch nicht" ? "Erinnerung hinzufügen": "Doch nicht");

                      Gar keine gute Idee, den Text im Script anstatt im Markup zu haben.

                      LLAP

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      1. Hallo Gunnar,

                        Gar keine gute Idee, den Text im Script anstatt im Markup zu haben.

                        hast du dann für mich eine andere Lösung und warum ist es nicht gut den Text im Script stehen zu haben?

                        1. @@Jnnbo

                          hast du dann für mich eine andere Lösung

                          Ja.

                          und warum ist es nicht gut den Text im Script stehen zu haben?

                          Separation of concerns. Das Script ist für Verhalten zuständig; nicht für (Text-)Inhalt.

                          Was, wenn du den Text ändern willst? Dann an 2 Stellen, HTML und JS? Unnötige Arbeit, fehleranfällig.

                          Was, wenn du die Seite übersetzen (lassen) willst?

                          LLAP

                          --
                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              2. @@Jnnbo

                Jetzt muss ich noch den Text ändern

                Eine Möglichkeit: Zwei Buttons verwenden und deren Sichtbarkeit auch umschalten. Würde ich aber nicht machen, sondern …

                ich habe gelesen dass man in jQuery auch text verwenden kann um einen Text innerhalb von <p> ändern kann.

                <button type="button" class="erinnerung"><span class="fa fa-plus"></span> Erinnerung hinzufügen</button>
                

                Wäre es dann nicht möglich mein Text innerhalb von <p> zu setzten und diesen dann ändern zu lassen?

                … den Text in Elemente packen, aber nicht p, sondern span. Entweder teilweise:

                <button ><span class="fa fa-plus"></span> Erinnerung <span class="">hinzufügen</span> <span class="">entfernen</span></button>
                

                oder ganz:

                <button >
                   <span class=""><span class="fa fa-plus"></span> Erinnerung hinzufügen</span>
                   <span class=""><span class="fa fa-minus-square"></span> Erinnerung entfernen</span>
                </button>
                

                was den Vorteil hat, dass du nicht Icon und Text getrennt umschalten musst.

                LLAP

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. Hallo Gunnar,

                  <button >
                     <span class=""><span class="fa fa-plus"></span> Erinnerung hinzufügen</span>
                     <span class=""><span class="fa fa-minus-square"></span> Erinnerung entfernen</span>
                  </button>
                  

                  das sieht eigentlich sehr gut aus, aber jetzt habe ich ja beide Beschriftungen im Button stehen. Das heißt ich muss meine jQuery Funktion wieder komplett umbauen?

    3. Tach!

      Du möchtest nicht $('.fa-plus'), sondern $('.fa') selektieren und in der Funktion auch die Klassen "fa-plus" und "fa-minus-square" togglen.

      Nein, er möchte das .fa nicht selektieren. Das .fa-plus und .fa-minus(-square) auch nicht, sondern einen aussagekräftigen, mehr spezifischen Selektor. Die drei genannten kommen sehr wahrscheinlich (vielleicht auch erst in der Zukunft) auch noch an anderen Stellen vor, denn die gehören zum Font Awesome.

      dedlfix.

  3. @@Jnnbo

    jQuery ist absolut nicht meine stärke.

    Dann nimm’s doch nicht!

    Spaß beiseite. Vorerst. Wir kommen drauf zurück.

    Hat jemand eine Idee oder ein Stück fertigen Code?

    Hab ich jetzt.

    Die Idee ist, mit JavaScript keine Darstellung anzugeben.

    Ob das Zeug im eingeklappten Zustand gänzlich verschwindet oder verkleinert wird oder (teil)transparent wird, kann JavaScript schnurzpiepegal sein. Mit JavaScript wird lediglich der Zustand hin- und hergeschaltet, bspw. mit einer Klasse am Containerelement.

    Markup:

    <div class="accordion collapsed">
    	<button class="ctrl-toggle">
    		<span class="label-expand">Anwort zeigen</span>
    		<span class="label-collapse">Anwort verstecken</span>
    	</button>
    	<p>Gitarrenlehrer: „Wie nennt man den ersten Finger?“</p>
    	<p class="details">Kind: „Zeigefinger.“</p>
    </div>
    

    Die Anzeige bzw. Nichtanzeige von Elementen regelt das Stylesheet:

    .label-expand { display: none }
    .accordion.collapsed .label-expand { display: inline }
    .accordion.collapsed .label-collapse { display: none }
    .accordion.collapsed .details { display: none }
    

    Das einzige, was JavaScript tut, ist die Klasse "collapsed" umzuschalten:

    $('.ctrl-toggle').on('click', function ()
    {
    	$(this).closest('.accordion').toggleClass('collapsed');
    });
    

    Wie du siest, sind hier keine IDs im Spiel und das Script sucht sich das zum gedrückten .ctrl-toggle-Button gehörige .accordion-Vorfahrenelement mittels closest().

    Das bedeutet, dass es mehrere dieser .accordion-Elemente mit jeweiligen .ctrl-toggle-Buttons und .details-Elementen geben kann.

    Beispiel 1 [^1]

    Nun stellt sich durchaus die Frage: Braucht man zum simplen Umschalten einer Klasse jQuery?

    Nein, moderne Broser können das mit Vanilla-JavaScript[^2]. Das sieht bis auf die in jQuery weggekapselte Schleife fast genauso aus:

    var ctrlToggleElements = document.querySelectorAll('.ctrl-toggle');
    for (var i = 0, l = ctrlToggleElements.length; i < l; i++)
    {
    	ctrlToggleElements[i].addEventListener('click', function ()
    	{
    		this.closest('.accordion').classList.toggle('collapsed');
    	}, false);
    }
    

    (im Beispielquelltext als Kommentar)

    Unschön daran ist, dass ohne JavaSript gar nichts geht; die Akkordeons bleiben zu.

    Sie müssten also initial offen sein und erst mit JavaScript geschlossen werden. Außerdem machen die Buttons ohne JavaScript keinen Sinn, weshalb sie initial versteckt werden (HTML-Attribut hidden) und erst mit JavaScript angezeigt werden:

    <div class="accordion">
    	<button class="ctrl-toggle" hidden>
    
    $('.accordion').addClass('collapsed');
    $('.ctrl-toggle').removeAttr('hidden').on('click', function ()
    {
    	$(this).closest('.accordion').toggleClass('collapsed');
    });
    

    .removeAttr('hidden') und .on('click',) kann man in jQuery direkt aneinanderhängen (chaining).

    Und so funktioniert das ganze auch ohne JavaScript: Alles wird angezeigt. JavaScript ist progressive enhancement. (Sollte es immer sein.)

    Beispiel 2

    Nun wirst du sagen: Ich wollte doch animiert auf- und zuklappen. Kannst du haben: mit CSS-Transitions.

    Beispiel 3

    Man kann nun nicht height zwischen 0 und auto animieren, sondern nur zwischen zwei Zahlenwerten. Da die Höhe unbekannt ist, wird max-height zwischen 0 und einem hinreichend großen Wert (im Beispiel 4em) animiert.

    Das hat zur Folge, dass beim Zuklappen die sichtbare Animation nicht sofort nach dem Drücken des Button erfolgt, d.h. dass der Nutzer kein sofortiges Feedback zu seiner Aktion erhält. Unschön.

    Abhilfe könnte sein, mit JavaScript die Höhe des gerenderten (geöffneten) .details-Elements auszulesen und dann zwischen 0 und diesem Wert zu animieren.

    Ich hab das jetzt nicht mit einem Screenreader getestet. Aber interessant dürfte sein, was letztens über den Ticker lief.

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) [^1]: Die Bespieltexte sind nicht von mir ausgedacht. [^2]: Wer hat sich eigentlich die Bezeichnung „Vanilla“ ausgedacht?
    1. @@Gunnar Bittersmann

      Nun wirst du sagen: Ich wollte doch animiert auf- und zuklappen. Kannst du haben: mit CSS-Transitions.

      Beispiel 3

      Oops, da fehlt das http://.

      Korrigierter Link: Beispiel 3

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)