Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
elfojonas

Problema com next() do jQuery

Recommended Posts

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

Compartilhar este post


Link para o post
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×