Problema com next() do jQuery

elfojonas · 18 de janeiro de 2017

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.

joseph_dev · 25 de janeiro de 2017

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>