Jquery Akkordeon Alle Erweitern Alle Reduzieren

War ich auf der Suche nach einer Möglichkeit, einen "expand all" und "collapse all". Ich habe aktualisiert die demo mit dem neuen code mit einem einfachen jquery-accordion.

Den original-code gutgeschrieben werden soll Ryan Stemkoski bei http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Demo: http://jsbin.com/ucalu3/5/

$(document).ready(function() { 
  $('.question').click(function() {

  if($(this).next().is(':hidden') != true) {
                $(this).removeClass('active'); 
    $(this).next().slideUp("normal");
  } else {
    $('.question').removeClass('active');  
     $('.answer').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
    $(this).addClass('active');
    $(this).next().slideDown('normal');
     }   
  }
   });

  $('.answer').hide();

  $('.expand').click(function(event)
    {$('.question').next().slideDown('normal');
        {$('.question').addClass('active');}
    }
  );

  $('.collapse').click(function(event)
    {$('.question').next().slideUp('normal');
        {$('.question').removeClass('active');}
    }
  );
});
Nur um zu zeigen, brauchen Sie nicht zu Bearbeiten, den Titel zu zählen "Gelöst", wenn Sie eine Antwort bekommen. Wenn eine Antwort akzeptiert wurde, wird die Antwort Zählung auf der Hauptseite wird wiederum von weiß bis gelb, um anzuzeigen, dass das problem gelöst ist.
Dank dieses Frage-und-Antwort... das hat mich gerettet...

InformationsquelleAutor Evan | 2010-10-06

  1. 3

    Möchte ich hinzufügen, eine Klasse oder ID zu erweitern und reduzieren die links dann so etwas wie dies funktionieren wird

    $(document).ready(function() {
  $("#expand").click(function(){
    ('.answer').slideDown('normal');
  });

  $("#collapse").click(function(){
    ('.answer').slideUp('normal');
  });
}
    Danke für den Tipp. Hab ich geändert, der code, damit es funktioniert.

    InformationsquelleAutor Sean

  2. 5

    Dies kann gelöst werden, viel einfacher.

    Verwenden Sie einfach die jQuery-hide/show-Befehl auf dem Akkordeon element ('.ui-widget-content'), die Sie wollen, zu erweitern/zu reduzieren.

    Beispiel:

    $(document).ready(function() {
        $('.expand').click(function() {
            $('.ui-widget-content').show();
        });
        $('.collapse').click(function() {
            $('.ui-widget-content').hide();
        });
});

    Sehen fiddle: http://jsfiddle.net/ekelly/hG9b5/11/

    InformationsquelleAutor user2500414

Schreibe einen Kommentar