Expandindo e recolhendo vários divs vizinhos dentro do mesmo elemento pai

Question

Estou lutando com esse pedaço de código e não tenho certeza se isso é possível.Tenho uma lista de divs em um único elemento pai e preciso recolher e expandir determinados conjuntos.Aqui está um exemplo:

<div id="parent">
  <div class="alway_show">ALWAYS SHOW ME</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="alway_show">ALWAYS SHOW ME</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
  <div class="collapse_me">COLLAPSIBLE</div>
</div>

Portanto, no estado inicial, .collapse_me será display:none.Haverá um link em Always Show para expandir SOMENTE os divs recolhidos abaixo daquele .always_show div específico.Eu sei que isso seria dez milhões de vezes mais fácil se os divs recolhíveis estivessem em seu próprio div, mas não tenho controle sobre o código.Eu tenho que fazer funcionar como está usando jquery.Possível?

Answer 1

$('div.always_show').nextAll().each(function() {
    if($(this).is('.collapse_me')) {
        $(this).toggle();
    }
    else {
        //this will halt the each "loop", stopping before the next .always_show
        return false; 
    }
});

Claro que você não deve usar meu seletor inicial 'div.always_show', mas forneça o elemento real, que será o pai do link clicado.Por exemplo:

$('#expand_anchor').parent().parent().nextAll()...

Answer 2

var fncdiv = function(){
    var el = this;
    do{
        el = $(el).next();
        if ($(el).hasClass("collapse_me") )
            $(el).toggle();
        else
            break;

    }while (true) 
};

$('#parent div.alway_show').bind("click", fncdiv);

Answer 3

Você não deveria precisar usar jQuery.Requer apenas algum CSS inteligente:

#parent
{
    /* normal parent css here */
}

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

Os seletores são aplicados em ordem de especificidade.Como '#parent.collapsed div' é mais específico que '#parent div', ele deve ser substituído.Agora, tudo que você precisa fazer é definir a classe do div pai e pronto.Você pode usar javascript para adicionar/remover a classe 'recolhida' ao DIV em tempo de execução para alternar a expansão sem nenhum esforço adicional:

// Mootools:
$('parent').addEvent('click', function()
{
  $('parent').toggleClass('collapsed')
});