Div espansione/compressione

Question

Ho più caselle di espansione/compressione su una singola pagina generata da PHP/MySQL.

Il problema è che quando faccio clic su un collegamento per espandere una casella, si espandono tutte le caselle.

Ho pensato di aggiungere l'ID post alla fine della lezione (<div class="postreplycontainer-POST_ID">) ma non sono sicuro che funzionerà dato che dovrei trovare un modo per cambiare il jQuery.

Ecco un esempio di lavoro: http://jsfiddle.net/Draven/kUhkP/35/

tenere a mente, non posso codice manualmente in ogni casella perché sto tirando i contenuti dal database.

MODIFICA: Forse qualcuno può aiutarmi con un ulteriore problema.

Desidero mettere a fuoco il riquadro textarea quando si espande lo <div>. Ho provato a utilizzare lo stesso trucco di prima (usando .closest ma non funzionava).

Ecco l'esempio: http://jsfiddle.net/Draven/kUhkP/53/

Questo esempio sarà sempre a fuoco il primo <textarea>.

Answer 1

Ecco il FIDDLE

$("a.postreply").click(function() { 
    $(this).closest('.blog-container') 
     .find('.postreplycontainer').slideToggle("fast"); 
}); 

Answer 2

Se si chiama $("div.postreplycontainer") si accede tutti i div, se il div è sempre dopo una tabella è possibile utilizzare

$("a.postreply").click(function() { 
    $(this).parents('table').next().slideToggle("fast"); 
}); 

alla diapositiva che div http://jsfiddle.net/kUhkP/39/

Answer 3

Penso che questo dovrebbe essere ok per il tuo problema.

$("a.postreply").click(function() { 
    $(this).closest('.blog-table').next().slideToggle("fast"); 
});