Existe uma maneira mais fácil com os acordeões jQuery?

Question

Eu tenho lutado com um recurso que tenho tentado criar há algum tempo. A idéia aqui é que o usuário vê a pequena manchete de miniatura +, bem como a informação publicada. Eles podem clicar no título para expandir para o artigo ou clicar no link "Comentários" para expandir diretamente para os comentários feitos no artigo. Ou, se quiserem, podem visualizar comentários clicando na manchete (para expandir para o artigo) e clique em Exibir comentários (para expandir para os comentários). No final, um sistema de abertura/fechamento modular, mas flexível e funcional, para visualizar as últimas notícias.

Aqui está o que eu tenho trabalhado: (eu coloquei todo o meu código em um lugar, então é mais fácil para quem pode olhar para isso para ver) http://notls.com/pointtest.html

É para isso que estou atirando, mas está longe do que eu quero; (está usando o plugin jQuery 1.6, que 1.8 está fora, mas estou longe de ser um mestre ou especialista nisso e acho que não poderia Construa desde o início. Já editei esse plugin para fazê -lo funcionar assim, mas como você pode ver, o autor e os comentários começam a fazer a merda atingir o ventilador;; é porque o código está chamando a "A tag" para o cabeçalho; qual é a manchete.

Alguém sabe uma maneira mais fácil de alcançar o que estou imaginando ou possível uma maneira de corrigir esse código atual? Estou muito desesperado neste momento ;;

Answer 1

Algo assim:?

http://jsbin.com/elawu

É um acordeão. Cada "primeiro elemento", ou cabeçalho, é um div. Dentro desse cabeçalho, há um título de artigo, um autor e uma extensão clicável listando o número de comentários para esse artigo.

Cada "segundo elemento", ou parte de conteúdo do acordeão, também é uma div. Dentro dessa div, há um artigo de conteúdo div e comentários div. Dentro dos comentários div, há um cabeçalho de comentário, novamente cliques e outro Div de conteúdo. A hierarquia se parece com a seguinte:

<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 a página inicia todos os comentários de comentários, as divs são ocultas via $('div.comments div').hide(); Além disso, o acordeão é configurado e o acordeão onaccordionchange e onaccordionchangestart Os eventos ficam vinculados. Finalmente, um evento de clique é registrado para os links de comentários.

Se você clicar em qualquer lugar no cabeçalho, ele abrirá a guia Conteúdo de acordeão associado. Se você clicar no link de comentários no cabeçalho, ele abre o acordeão, e abre os comentários div dentro do conteúdo div.

Sempre que uma guia de acordeão é aberta, o link de comentários no cabeçalho fica escondido. Sempre que uma guia de acordeão fecha, o link de comentários no cabeçalho é mostrado.

Clicando no link de comentários no conteúdo de acordeão Div, alterna os comentários reais.

Answer 2

Oh, eu sinto que entendi

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

e use aula CSS oculta

.hidden {
    display:none;
}