Javascript hides div when showing another div

Question

Javascript hides div when showing another div

Navigation

#1 by (0 votes)

2

Can anyone tell me, how do I hide a div when I show another one?

I have a hidden div that only shows when I receive a condition. I would like that when this hidden div receives the condition and appears, hide another div.

However, there is no button action in this case. When entering the page, the visitor who did not choose anything previously, will find a warning and in this case, would like to hide another warning that is always open.

Eg Condition Div1 always visible. Div2 always hides.

As you enter the page; Div1 (still visible) would like to hide it. Div2 viewable.

DIV ALWAYS VISIBLE

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

DIV ONLY WHEN THE CART IS EMPTY:

<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>

I would like that when the "Your Tote Bag is empty" warning appears on the page, hide the WarningCode

You do not need to have any button action.

I tried to do it through echo, but without success.

javascript div

asked by anonymous 14.01.2017 / 22:43

1 answer

Architecture on Promisse and Cloud [closed] Cell selection

score 0 · Accepted Answer

There are several ways and do this (if I understood correctly), with jquery you could do so. As you have not put code, and I seem to be using php to pop up the new div, I believe it will not appear dynamically:

//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><divclass="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

Here the same code, but without the new alert, so I keep the warning that is always visible

//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><divclass="sempreVisivel">
  Aviso sempre visivel
</div>

A solution with JavaScript would be the same way, checking if the div that will appear, if it appeared, removes the one that is always visible:

When it exists:

//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><divclass="sempreVisivel">
  Aviso sempre visivel
</div>
<div class='divQueVaiAparecer'>Apareci</div>

And when it does not exist, it leaves normal like this, just the default alert:

//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><divclass="sempreVisivel">
  Aviso sempre visivel
</div>

I hope this helps you:)