Übersicht

Hier wird über einen Anker ein Objekt angesprochen, auf dass eine Aktion angewendet wird. Hier wird es etwas komplizierter, da hier auf 3 Möglichkeiten eingegangen wird.

1. Alle Fenster sind oben. Der Tab öffnet das dazugehörige Fenster. Der Tab ist aktiv.
2. Der Tab für das Fenster, welches sichtbar ist, wird angeklickt. Das Fenster wird hochgefahren. Alle Tabs sind deaktiviert.
3. Es wird auf ein Tab geklickt, für ein Fenster welches nicht sichtbar ist. Das sichtbare Fenster wird hochgefahren, anschließend wird das ausgewählte runtergefahren.

Erklärung

Das Ganze habe ich realisiert, indem es 2 Variablen gibt, eine für das aktuell runtergeklappte Element

nextElm

Eine für das Element welches gerade aufgerufen wurde.

curElm

Wenn gar kein Element sichtbar ist, wird die Variable nextElm auf undefined gesetzt. Die anderen Werte werden als String zugewiesen: "nextElm", "curElm" Das hat folgende Vorteile

1. Variablen sind einfach zu überprüfen,
2. Variablen kann man als Selektor verwenden

Die Variable für das aktuell sichtbare Element bekommt ihren Wert von dem angeklickten Element nachdem es runtergefahren ist, in einer Callback Funktion.

Code

var curElm, nextElm;

$(document).ready(function() {
	$("#absatz1").slideUp(0);
	$("#absatz2").slideUp(0);
	$("#absatz3").slideUp(0);	
	curElm = undefined;	
	
$('.navi').click(function(event) {
	nextElm = $(event.target).attr("href");
	event.preventDefault();
	if(String(nextElm) == String(curElm)){
		
		$(curElm).slideUp(200, function(){curElm = undefined});
		}else if(curElm == undefined){
			$(nextElm).slideDown( 200); curElm = nextElm;
			}		
		else{
		$(curElm).slideUp(200, function(){$(nextElm).slideDown( 200, function(){curElm = nextElm;});});
		}	
});		
});