C'è un modo più semplice con fisarmoniche jQuery?

Question

Sono stato alle prese con una caratteristica che ho cercato di creare per qualche tempo. L'idea qui è che l'utente vede il piccolo miniature + titolo, così come il Pubblicato da informazioni. Essi possono quindi fare clic sul titolo per espandersi per l'articolo o fare clic sul link "Commenti" per espandere direttamente ai commenti fatti su questo articolo. O, se vogliono possono visualizzare i commenti cliccando sul titolo (per espandere l'articolo), poi clicca sul Guarda Commenti (ad espandersi ai commenti). Alla fine, uno stretto sistema modulare ma flessibile e funzionale aperto / per visualizzare le ultime notizie.

Ecco quello che ho lavorato su: (io ho messo tutto il mio codice in un posto così la sua più facile su chiunque può guardare a questo per vedere) http://notedls.com/pointtest.html

Questo è quello che sto girando per, ma è lontano da quello che voglio; ( E 'utilizzando il plugin jQuery 1.6, che 1.8 è fuori ma io sono ben lungi dall'essere un maestro o un esperto a questo e non credo che ho potuto costruire da zero. Ho già modificato questo plugin per farlo funzionare come questo, ma come si può vedere, l'autore e commenti iniziare a fare merda ha colpito il ventilatore ;; E 'perché il codice chiama il "tag" per l'intestazione; che è il titolo.

Qualcuno sa un modo più facile per ottenere quello che sto immaginando o un modo un possibile risolvere questo codice attuale? Sono abbastanza disperato a questo punto ;;

Answer 1

Qualcosa di simile a questo :?

http://jsbin.com/elawu

E 'una fisarmonica. Ogni "primo elemento", o intestazione, è un div. All'interno di questa intestazione è un titolo articolo, un autore e un arco cliccabile elenca il numero di commenti per questo articolo.

Ogni "secondo elemento", o parte del contenuto della fisarmonica, è anche un div. All'interno di questo div c'è un div contenuto dell'articolo, e commenti div. Nei commenti del div c'è un commento di testa, ancora una volta cliccabile, e un altro div contenuti. Gli sguardi di gerarchia come questo:

<div id='outer-accordion'>
   <div class='header'>
      <p>Article headline</p>
      <p>by: Author</p>
      <p><span class='clickable'># comments</span></p>
   </div>
   <div class='content'>
      <div class='article'>...</div>
      <div class='comments'>
        <p><span class='clickable'># of comments</span></p>
        <div class='comment-content'>
           comment #1
           comment #2
           ...
        </div>
      </div>
   </div>

   ....

Quando la pagina inizia tutti i div commentare contenuti, scarica nascosti tramite $('div.comments div').hide(); anche la fisarmonica viene istituito, e gli eventi di fisarmonica onaccordionchange e onaccordionchangestart ottenere legato. Infine, un evento click è registrato per i collegamenti commenti.

Se si fa clic in qualsiasi punto della testata, che si aprirà la scheda contenuti fisarmonica associato. Se si fa clic sui commenti dei collegamenti nell'intestazione, si apre la fisarmonica, e apre i commenti che div div all'interno del contenuto.

Ogni volta che uno scheda fisarmonica viene aperto, i commenti che collegano nell'intestazione viene nascosto. Ogni volta che una linguetta fisarmonica si chiude, i commenti dei collegamenti nell'intestazione viene mostrato.

Cliccando sui commenti link all'interno del div contenuti fisarmonica, alterna i commenti attuali.

Answer 2

Oh, mi sento ho capito

$('.author').click(function() {
    $(this).parent().find('.authordiv').toggleClass('hidden');
});
$('.comments').click(function() {
    $(this).parent().find('.commentsdiv').toggleClass('hidden');
});

e l'uso nascosto classe CSS

.hidden {
    display:none;
}