Expandir y contraer varias Div vecinos dentro del mismo elemento padre

Question

Estoy luchando con este fragmento de código, y no estoy seguro de si es aún posible. Tengo una lista de divs dentro de un mismo elemento padre, y necesito a contraer y expandir ciertos conjuntos. He aquí un ejemplo:

<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>

Por lo tanto, en el estado inicial, .collapse_me habrá display: none. Habrá un enlace en mostrar siempre a ampliar SÓLO los divs colapsadas por debajo de ese div .always_show particular. Sé que esto sería diez millones de veces más fácil si los divs plegables estaban en su propia div, pero no tienen control sobre el código. Tengo que hacer que funcione como está usando jQuery. Posible?

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; 
    }
});

Por supuesto que no debería usar mi 'div.always_show' inicial de selección, sino más bien suministrarla el elemento real, que será el padre del enlace se hace clic. Por ejemplo:

$('#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

No debería ser necesario utilizar jQuery. Sólo se requiere un poco de CSS inteligente:

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

#parent div
{
  display: block;
}

#parent.collapsed
{
    display: block;
}

#parent.collapsed div
{
  display: none;
}

Selectores se aplican en orden de especificidad. Desde '# div parent.collapsed' es más específico que '#parent div', se debe anular. Ahora, todo lo que tiene que hacer, se establece la clase del div padre, y ya está. Puede usar javascript para añadir / eliminar la clase 'colapsado' a la VID en tiempo de ejecución para alternar la expansión sin ningún esfuerzo adicional:

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