Accordéon Jquery Tout développer Réduire tout

Question

Je cherchais un moyen d'inclure un "tout développer" et "tout réduire". J'ai mis à jour la démo avec le nouveau code en utilisant un simple accordéon jquery.

Le code d'origine doit être créditée à Ryan Stemkoski à http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Démo: 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');} 
    } 
); 
}); 

Answer 1

Je voudrais ajouter une classe ou d'ID à l'expansion et des liens effondrement alors quelque chose comme ça fonctionnera

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

    $("#collapse").click(function(){ 
    ('.answer').slideUp('normal'); 
    }); 
} 

Answer 2

Cela peut être résolu beaucoup plus facilement. Utilisez simplement la commande hide/show de jQuery sur l'élément accordéon ('.ui-widget-content') que vous voulez développer/réduire.

exemple:

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

Voir violon: http://jsfiddle.net/ekelly/hG9b5/11/