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.