Ir para conteúdo
Fórum Script Brasil
  • 0

Exibir e Ocultar DIV


Oswaldo

Pergunta

Galera, manjo muito pouco de Jquery e estou precisando de uma ajuda.

Tenho uma pagina de central de ajuda do site, nela contem alguns tópicos no qual clicando no link ele exibe uma div oculta com o conteúdo.
Segue html do menu:

<div class="box-menu">
	<div class="bt-como-comprar"></div><!-- link menu image -->
</div>
<div class="box-menu">
	<div class="bt-prazos-entrega"></div> <!-- link menu image -->
</div>

<!--Conteudo DIV oculta no css (display:none;) -->

<section>
	<article id="como-comprar">
		<h3>Realizando uma Compra</h3>
		<p>
			Após encontrar o produto desejado, basta clicar no botão Comprar para adicioná-lo ao seu carrinho de compras. Feito isso, você tem a opção de continuar comprando ou finalizar a compra. Se a opção desejada for finalizar a compra, informe seu CEP, clique no botão Calcular e em seguida no botão Próximo Passo. Caso seja cliente cadastrado, informe seu e-mail e sua senha e confirme os dados de entrega. Se for um cliente não cadastrado, basta preencher o formulário com seus dados pessoais e dados de entrega. O último passo é escolher a forma de pagamento, insira os dados necessários e aguarde a confirmação do pedido. Tudo muito fácil, rápido e seguro.
		</p>
	</article>		
</section>		
<section>
	<article id="prazos-e-entrega">
		<h3>Prazos e Entrega</h3>
		<p>
			O prazo de entrega depende de alguns fatores:
			<ul>
				<li>Forma de pagamento escolhida.</li>
				<li>Endereço de entrega.</li>
				<li>Coerência dos dados pessoais e de entrega.</li>
				<li>Disponibilidade do produto em nossos fornecedores.</li>
			</ul>
			Sendo assim o prazo de entrega pode variar entre 3 e 10 dias úteis.
			Em caso de greve dos Correios, o prazo será indefinido até a normalização das entregas.
		</p>
	</article>		
</section>

Segue o Jquery:

<script type="text/javascript">
   $(document).ready(function() {
       $("div.bt-como-comprar").toggle(
           function() {
               $("article#como-comprar").slideDown();
			   $("article#prazos-e-entrega").slideUp();
           },
           function() {
               $("article#como-comprar").slideUp();
           }
       );
	   
       $("div.bt-prazos-entrega").toggle(
           function() {
               $("article#prazos-e-entrega").slideDown();
			   $("article#como-comprar").slideUp();
           },
           function() {
               $("article#prazos-e-entrega").slideUp();
           }
       );
   });
</script>

O problema é, se eu clicar no link como comprar, ele exibe a div, se clicar novamente ele oculta. Se eu clicar em um dos link e exibir a div e depois clicar em outro link ele esconde a div atual e exibe a nova div, mas se eu clicar no outro link novamente ele não reverte a situação, para isso eu tenho que dar duplo clique para voltar a funcionar, esconder a div atual e mostrar a nova div.
Como resolver isso?
 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...