Ir ao conteúdo
  • Cadastre-se

elfojonas

Membro Júnior
  • Posts

    1
  • Cadastrado em

  • Última visita

Reputação

0
  1. Boa tarde pessoal. Estou com um problema ao utilizar o elemento next() do Jquery em uma aplicação. O que preciso fazer é criar dois blocos com um botão para exibir detalhes e esconder. ---- Título 1 [BOTÃO] Texto .... ---- O código que estou utilizando: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>Lorem Ipsum</title> </head> <body> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Bloco de conteúdo</h3> </div> <div class="panel-body"> <h3>Título 1 <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button></h3> <!-- Estou com problemas aqui, quando inclui o botão dentro do h3 --> <div class="conteudo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p> </div> <h3>Título 2</h3> <button class="btn btn-default btn-sm btn-mostrar">Detalhes</button> <!-- Dessa forma funciona normalmente mas fica desalinhado --> <div class="conteudo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur dolorum aperiam suscipit aspernatur repellat.Magni et eos cupiditate quis quidem, neque.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem harum magni optio, natus non nobis quisquam hic neque rem distinctio eos pariatur provident, tenetur quis veniam deleniti, architecto vel maxime laborum, aliquam necessitatibus. Eos perspiciatis, necessitatibus quisquam neque recusandae eius quo culpa a asperiores!</p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript"> function main(){ $('.conteudo').hide(); $('.btn-mostrar').on('click',function(){ $(this).next().slideToggle(400); if ($(this).text() == "Esconder") { $(this).text("Detalhes"); } else { $(this).text("Esconder"); }; }) } $(document).ready(main); </script> </body> </html> Na imagem anexada mostro o que está ocorrendo, o botão do título 1 não funciona mas está alinhado como quero. O botão do título 2 funciona corretamente, porém, não está alinhado de forma correta.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...