Pesquisar na Comunidade
Mostrando resultados para as tags ''toggle''.
Encontrado 1 registro
-
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!
