Ir ao conteúdo
  • Cadastre-se

Problema com next() do jQuery


Posts recomendados

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.

problema.PNG

Link para o comentário
Compartilhar em outros sites

Opa!

Fiz uma pequena alteração na div panel-body... Substitui os elementos <h> por <span> e atribui um css para aumentar o tamanho... Ficou legal aqui...

<div class="panel-body">
	<div>
		<span style="font-size:24px">Título 1 </span>
		<button class="btn btn-default btn-sm btn-mostrar">Detalhes</button>
		<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>
		<span style="font-size:24px">Título 2</span>
		<button class="btn btn-default btn-sm btn-mostrar">Detalhes</button>
		<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>

 

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

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...