Slidedown Menü über wiederholtes Klicken einfahren.

[herr_e]

Hallo zusammen -

ich bastel gerade an einer Seite und habe dieses Script. Versteckte Seiten erscheinen, wenn man auf den entsprechenden Link klickt. Leider brauche ich einen zweiten Link, um den Inhalt wieder verschwinden zu lassen - ich würde das gern anders lösen, also theoretisch über einen if-Befehl.

Wenn Du auf den Link klickst - fahre den Inhalt raus. Wenn du auf den Link klickst und der Inhalt ist rausgefahren - fahr ihn halt wieder rein. Aber ich weiß nicht, wo ich ansetzen soll:

    $(document).ready(function() {
    
	  	/* Gallery presets */
	  	$(".gallery-content").show(); // Initial state
    
      /* Animate the main navigation container */ 
      $(".topbox-content").hide(); // Initial state
      // Opening behaviour
      $(".topbox-open").each(function(index) { // For each main navigation container do this
        $(this).click(function() {
          $(".topbox-content.closed").eq(index+1).slideDown(750, "easeInOutQuart"); // Open this main navigation container
          $(".topbox-content").removeClass("closed"); // Adding class to enable delayed opening when another box is already open
          $(".topbox-content:not(.closed)").eq(index+1).siblings(".topbox-content").slideUp(750, "easeInOutQuart"); // Close all other main navigation container
          $(".topbox-content:not(.closed)").eq(index+1).delay(750).slideDown(750, "easeInOutQuart"); // Open this main navigation container
        });
      });
      // Closing behavior
      $(".topbox-close").each(function(index) { // For each main navigation container do this
        $(this).click(function() {
          $(".topbox-content").slideUp(750, "easeInOutQuart"); // Close this main navigation container
          $(".topbox-content").addClass("closed"); // Removing class to prevent delayed opening on first click
        });
      });
      $(".topbox-close").click(function() {
        $(".contenteditable").each(function() { // For all form fields do this
          $(this).removeClass("gray-text").addClass("black-text").html(this.attributes["title"].value); // Reset to initial state
          $(".topbox-content").addClass("closed"); // Removing class to prevent delayed opening on first click
        });
      });

Besten Dank für Eure Tipps!

 

[rico2009]

Hi,

das mit dem If ist schon mal sehr gut und der richtige Weg. Im Prinzip musst du in deiner Klick Funktion nur prüfen, ob das Elemente schon angezeigt wird oder nicht. Bei nicht, anzeigen, ansonsten ausblenden.

Ich habe das mal ganz kurz und knapp in einem Fiddle zusammen gestellt: Edit fiddle - JSFiddle

 

[herr_e]

Herzlichen Dank für die schnelle Antwort - das ist super!
Theoretisch war mir das klar - aber dein Fiddle hat mir geholfen. Es funktioniert jetzt auch recht gut, nur hat sich ein neues Problem ergeben.
Aktuell ist es so: Prüfen, ob Element angezeigt wird - wenn ja, dann öffnen, falls nein, dann schließen.
Nur, wenn ich jetzt auf irgendeinen Link klicke, schließt er das Element (prinzipiell auch richtig), aber er so gleichzeitig das neue Element öffnen.

Also eine Navigationsliste mit A B C D Inhalten, die alle versteckt sind. Bei Klick auf A - A öffnen, bei Klick auf A A schließen. Aber bei Klick auf B, A schließen und B öffnen - das geht irgendwie nicht.

Besten Dank für alle Hilfe

  <script type="text/javascript">
    $(document).ready(function() {
      $(".topbox-content").hide();
	  $(".topbox-content").addClass("closed");
	  $(".topbox-open").each(function(index) { // For each main navigation container do this
        $(this).click(function() {
		if ($(".topbox-content").is(":visible")) {
            $(".topbox-content").show();
			$(".topbox-content").slideUp(750, "easeInOutQuart"); // Close this main navigation container
          	
        } else {
            $(".topbox-content").hide();
			$(".topbox-content").eq(index+1).slideDown(750, "easeInOutQuart"); // Open this main navigation container
          $(".topbox-content").removeClass("closed"); // Adding class to enable delayed opening when another box is already open
          $(".topbox-content:not(.closed)").eq(index+1).siblings(".topbox-content").slideUp(750, "easeInOutQuart"); // Close all other main navigation container
          $(".topbox-content:not(.closed)").eq(index+1).delay(750).slideDown(750, "easeInOutQuart"); // Open this main navigation container
		  $(".topbox-content").addClass("closed");
			}
        });
      });