2010-10-06 21 views
5

Stavo cercando un modo per includere "espandi tutto" e "comprimi tutto". Ho aggiornato la demo con il nuovo codice usando una semplice fisarmonica jquery.Jquery Accordion Espandi tutto Comprimi tutto

Il codice originale debbono essere accreditati al Ryan Stemkoski a 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');} 
    } 
); 
}); 
+0

solo far notare, non c'è bisogno di modificare il titolo per includere 'risolto' una volta che si ottiene una risposta. Quando una risposta è stata accettata, il conteggio delle risposte nella pagina principale passerà da bianco a giallo per indicare che il problema è stato risolto. –

+0

grazie a questa domanda e risposta ... questo mi ha salvato ... –

risposta

3

vorrei aggiungere una classe o un ID ai collegamenti espandere e comprimere poi qualcosa di simile funzionerà

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

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

Grazie per il suggerimento. Ho modificato il codice per farlo funzionare. – Evan

5

Questo può essere risolto molto più facilmente.

Basta usare il comando jQuery hide/show sull'elemento fisarmonica ('.ui-widget-content') che si desidera espandere/comprimere.

esempio:

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

See violino: http://jsfiddle.net/ekelly/hG9b5/11/

Problemi correlati