CSS condition with jQuery, e.g.: if div1 is visible the div2 will also be

Asked

Viewed 1,301 times

2

I don’t know much Js/jQuery, but I need the following <div> hide when another <div> is hidden too.

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

I was following some existing examples and I 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();
    }
},

Full JS file

javascript jquery

  • Does it give an error in your code? Expected result, obtained result? I think it’s easier if you mount a Stacksnippet or Jsfiddle that demonstrates the problem in isolation (html and js basic).

  • No error, but it does not show the expected result. I do not know if I can post the code because I am using the e-commerce platform.

  • I don’t see unavailableProductDefault in your code .js. Where is it?

  • So Sergio, the code I’m using local the platform has a system that I can reverse Proxy and use the local files and with Livereload.

2 answers

3

Since you are using jQuery you can use the 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>
<div id="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.

  • 2

    Hi, periotto, the cool is to put here a sample of the code and link pro fiddle as demonstration. Depending on the case, and this may be one, it gets cooler using a Stacksnippet

  • 1

    brasofilo thanks for the tip, already I will change :D

  • Dear thanks for the help, but I don’t think I explained it well. I want to do the following: if the div1 is visible to div2 will also be displayed if the div1 is not visible to div2 neither will be.

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 from your logic, the element always exists on the page, whether visible or not:

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

Never gets into the 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 make use of the method .is() (English) which 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 mess with the values of the variables, you don’t need to do multiple updates further down in the middle of the code.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.