javascript Toggle independente

Phil Santos · Fevereiro 2, 2017

Olá amigos,

Eu estou tentando fazer uma aplicação com javasript bem simples, mas estou tendo um problema, como eu não sou bom em js peço aos colegas uma solução por favor.

Eu tenho uma lista de diversos ítens em uma página com um título h1 que não deve ser escondido em momento nenhum e um botão abaixo escrito "Mostrar detalhes" e preciso que quando o usuário clicar em Mostrar detalhes deslize para baixo e mostre os detalhes, mas um deslizamento que eu possa escolher em millisegundos ou com slow. O problema é que do jeito que estou fazendo como vou mostrar aqui no post quando clico em um Motrar detalhes abrem todos da página e só deve ser aberto o que o usuário clicou e os outros fiquem fechados. A estilização do h1, do botão e do conteúdo serão, a princípio a mesma, mas o conteúdo do h1 e do que será ocultado e exibido são diferentes, de conteúdo igual é só a frase "Mostrar detalhes". Serão inumeros blocos destes em uma mesma página, bem mais de 100.

O script:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p.teste").toggle('slow');
    });
});
</script>
</head>
<body>

<h1 class="h1_teste">H1 1</h1>
<p class="teste">Conteúdo 1 a mostrar e ocultar</p>

<button>Mostrar detalhes</button>

<h1 class="h1_teste">H2 2</h1>
<p class="teste">Conteúdo 2 a mostrar e ocultar</p>

<button>Mostrar detalhes</button>

</body>
</html>

Obrigado!

Editado Fevereiro 2, 2017 por Phil Santos

lowys · Fevereiro 2, 2017

Olá!

Coloque o conteúdo dentro de uma div e proceda assim:

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   </head>
   <body>
      <div>
         <h1 class="h1_teste">H1 1</h1>
         <p class="teste">Conteúdo 1 a mostrar e ocultar</p>

         <button>Mostrar detalhes</button>
      </div>
      <div>
         <h1 class="h1_teste">H2 2</h1>
         <p class="teste">Conteúdo 2 a mostrar e ocultar</p>

         <button>Mostrar detalhes</button>
      </div>

      <script>
         $(document).ready(function () {
            $("button").click(function () {
               $(this).closest('div').find('p').toggle('slow');
            });
         });
      </script>
   </body>
</html>

Entrar

javascript Toggle independente

Pergunta

Phil Santos

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades