JQUERY Akkordeon-Naviation

[Frank the Tank]

Hallo,

nach längerer Suche nach einer Ak­kor­de­on-Navigation bin ich nun auf folgende, mittels jquery implementierte Variante gestoßen, die auch zuverlässig funktioniert:

http://codepen.io/css-tricks/pen/LufJE

An und für sich ziemlich selbsterklärend, hier nochmals der JQUERY-Code:

(function($) {  
  
  var allPanels = $('.accordion > dd').hide();  
  
  $('.accordion > dt > a').click(function() {  
    allPanels.slideUp();  
    $(this).parent().next().slideDown();  
    return false;  
  });  
  
})(jQuery);

Wenn ich also auf .accordion > dt > a klicke, werden alle Panels geschlossen und das aktuelle Panel geöffnet. Klickt man nun erneut auf ein bereits aktives Panel, so schließt sich selbiges und öffnet sich wieder (eine natürlich logische Konsequenz aus dem Code), was ich aber gerne unterbinden würde:

Was ich also zu konstruieren versuche ist eine Zusatzfunktion, die auf erneutes Klicken eines aktiven Panels selbiges wieder schließt und deaktiviert (sodass wieder alle Panels geschlossen sind).

Man dankt, wenn mir da irgendwer weiterhelfen könnte, wäre ich natürlich auch bereit das entsprechend als Kommentar im Quellcode zu würdigen.

LG,
FtT

[Linuchs]

(function($) {

var allPanels = $('.accordion > dd').hide();

$('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

  
Du musst dir vor dem hide() merken, welches Panel offen ist und die Zeile mit slideDown() davon abhängig machen, dass ein anderes Panel gedrückt wurde.  
  
Linuchs

[Matthias Apsel]

Om nah hoo pez nyeetz, Linuchs!

Du musst dir vor dem hide() merken, welches Panel offen ist und die Zeile mit slideDown() davon abhängig machen, dass ein anderes Panel gedrückt wurde.

(function($) {  
  
  var allPanels = $('.accordion > dd').hide();  
  
  $('.accordion > dt > a').click(function() {  
      if ($(this).parent().next().css('display') == 'none') {  
          allPanels.slideUp();  
          $(this).parent().next().slideDown();  
      }  
      return false;  
  });  
  
})(jQuery);

Es werden jetzt nur noch alle Panels eingeklappt, wenn das, auf das man klickt, geschlossen ist.

Matthias