CSS condition with jQuery, eg if div1 is visible then div2 will also be

Question

CSS condition with jQuery, eg if div1 is visible then div2 will also be

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

Speak guys do not handle much Js / jQuery, but I need the following that a <div> hides when another <div> is hidden as well.

Ex: When the buy button is hidden a <div> with the discounts hide also and display <div> unavailable.

I was following some existing examples and did this:

unavailableProductDefault: function(){
    if ($('.buyButtonWrapper').length){ //botão comprar
        $('.bloco-flags-desconto .flagsWrapper') .hide(); //div flags descontos
        $('.bloco-flags-desconto .flagsWrapper2') .show(); // div flag Indisponivel
        $('.ui-accordion') .hide(); // oculta o accordion de parcelamento
    }
    else {
        $('.bloco-flags-desconto .flagsWrapper') .show();
        $('.bloco-flags-desconto .flagsWrapper2') .hide();
        $('.ui-accordion') .show();
    }
},

Complete JS file

javascript jquery

asked by anonymous 23.10.2014 / 15:44

2 answers

How to show icon in action Bar when item is in overflow? Go through dates by printing a field for each one

score 3 · Answer 1

Since you are using jQuery you can use toggle()

$("#esconde").on('click', function(){
        $("#botao,#parcelamento").toggle('slow')
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="botao">
    <input type="submit"/>
</div>
<input type="submit" id="esconde" value='Esconder botao e parcelamento'/>
<div id="parcelamento">
    <ul>
        <li>parcelamento 1</li>
        <li>parcelamento 2</li>
        <li>parcelamento 3</li>
    </ul>    
</div>

Now you just have to adapt to your system.

score 2 · Answer 2

In your code you are not checking whether the element is visible or not, you are checking whether it exists on the page.

From what I understand of your logic, the element always exists on the page, whether it is visible or not:

if ($('.buyButtonWrapper').length) { ... }

Never enter else because the element is present in the DOM, only it is not visible to the user.

Solution

To check if the element is visible, in jQuery you can use the .is() method. that will check the element "against" a selector, in this case the :visible ( English) :

// Se "Comprar" está visivel
if ($('.buyButtonWrapper').is(':visible')) {

  $('.bloco-flags-desconto .flagsWrapper').hide();   // div flags descontos
  $('.bloco-flags-desconto .flagsWrapper2').show();  // div flag Indisponivel
  $('.ui-accordion').hide();                         // accordion de parcelamento
}

// Se "Comprar" está escondido
else {
  $('.bloco-flags-desconto .flagsWrapper').show();
  $('.bloco-flags-desconto .flagsWrapper2').hide();
  $('.ui-accordion').show();
}

Your code can still be optimized for:

// colocar elementos em cache
var $descontos    = $('.bloco-flags-desconto .flagsWrapper'),  // div flags descontos
    $indisponivel = $('.bloco-flags-desconto .flagsWrapper2'), // div flag Indisponivel
    $parcelamento = $('.ui-accordion');                        // accordion de parcelamento

if ($('.buyButtonWrapper').is(':visible')) {
  // Se "Comprar" está visivel
  $descontos.hide();
  $indisponivel.show();
  $parcelamento.hide();
}
else {
  // Se "Comprar" está escondido
  $descontos.show();
  $indisponivel.hide();
  $parcelamento.show();
}

The second version of the code is preferable because if you have to update the selectors, you only need to tweak the values of the variables, you do not need to be doing multiple updates further down the middle of the code.