2

Alguém pode me dizer, como faço para ocultar uma div quando mostrar outra?

Tenho uma div oculta que só mostra ao receber uma condição. Gostaria de que quando esta div oculta recebesse a condição e aparecer, ocultar outra div.

Porém, não há ação de botão neste caso. Ao entrar na página, o visitante que não escolheu nada anteriormente, encontrará um aviso e neste caso, gostaria de ocultar um outro aviso que fica sempre aberto.

Ex.: Condição Div1 visível sempre. Div2 oculta sempre.

Ao entrar na página; Div1 (continua visível) gostaria de oculta-la. Div2 visível.

DIV SEMPRE VISÍVEL

<div id="AvisoCar">
<div class="AvisoCarrinho">** AVISO IMPORTANTE **</div></div>

DIV QUE SÓ APARECE QUANDO O CARRINHO ESTA VAZIO:

<div class="ValorTotalComp">
TOTAL + FRETE: R$ <?=toReal((isset($_SESSION['LOJA_DEFAULT']['VALOR_FRETE'])?$‌​_SESSION['LOJA_DEFAU‌​LT']['VALOR_FRETE']:‌​0)+$totCompra)?> <? } 

else { echo "**<div class='AvisoSacolavazia'>Sua sacola está vazia</div>**"; }?> 

</div>

Eu gostaria de que quando o aviso de "Sua Sacola está vazia" aparecer na página, ocultar a div AvisoCar

Sem que se tenha que ter ação de algum botão.

Tentei fazer através do echo, mas sem sucesso.

6
  • Não entendi, qual é a div2 e qual é a div1? Você tem uma div dentro de outra, se ocultar a div "pai" a outra vai sumir também.
    – mau humor
    Commented 14/01/2017 às 22:14
  • Esta div esta sempre visível. <div id="AvisoCar"><div class="AvisoCarrinho">** AVISO IMPORTANTE **</div>
    – Biel
    Commented 14/01/2017 às 22:17
  • Esta só aparece quando o carrinho esta vazio. <div class="ValorTotalComp"> TOTAL + FRETE: R$ <?=toReal((isset($_SESSION['LOJA_DEFAULT']['VALOR_FRETE'])?$_SESSION['LOJA_DEFAULT']['VALOR_FRETE']:0)+$totCompra)?> <? } else { echo "<div class='AvisoSacolavazia'>Sua sacola está vazia</div>"; }?> </div>
    – Biel
    Commented 14/01/2017 às 22:17
  • Gostaria de ocultar a div AvisoCar, quando aparecer a div AvisoSacolavazia
    – Biel
    Commented 14/01/2017 às 22:18
  • Edita a pergunta e insere essas informações, fica melhor.
    – mau humor
    Commented 14/01/2017 às 22:18

1 Resposta 1

0

Há várias maneiras e fazer isso (Se eu compreendi bem ), com jquery voce poderia fazer assim. Como você não colocou código, e me parece que esta usando php para aparecer a nova div, acredito que ela não vai aparecer de forma dinâmica:

//ao carregar a pagina
$(document).ready(function() {
  //verificando se existe um novo alerta
  if ($(".divQueVaiAparecer").is("div")) {
    //se existir, eu removo a que esta sempre visivel
    $(".sempreVisivel").remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

Aqui o mesmo código, mas sem que exista o novo alert, então mantenho o aviso que sempre esta visivel

//ao carregar a pagina
$(document).ready(function() {
  //verificando se existe um novo alerta
  if ($(".divQueVaiAparecer").is("div")) {
    //se existir, eu removo a que esta sempre visivel
    $(".sempreVisivel").remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
 

Uma solução com JavaScript seria da mesma forma, verificando se a div que vai aparecer, se ela apareceu, remove a que fica sempre visivel:

Quando ela existir:

//verifica se a div que vai aparecer, apareceu
if(document.getElementsByClassName("divQueVaiAparecer").item(0)){
//remove a div que fica sempre visivel
document.getElementsByClassName("sempreVisivel").item(0).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

E quando ela não existir, deixa normal como esta, só o alerta padrão:

//verifica se a div que vai aparecer, apareceu
if(document.getElementsByClassName("divQueVaiAparecer").item(0)){
//remove a div que fica sempre visivel
document.getElementsByClassName("sempreVisivel").item(0).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sempreVisivel">
  Aviso sempre visivel
</div>

Espero que isso lhe ajude :)

1
  • Obrigado amigo, consegui com a primeira opção em Jquery. Funcionou perfeitamente como precisava. Eu tentei colocar o código que estava usando, mas não entendi porque não apareceu. Se quiser ver o resultado estou disponibilizando o link serverfox.com.br/foxstore/index.php?modulo=Carrinho Se deixar o carrinho vazio, não vai aparecer o aviso, se incluir um item, vai mostrar uma instrução. Muito obrigado novamente.
    – Biel
    Commented 15/01/2017 às 13:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .