Hide Div if other Div has HTML “hidden” attribute in it

I’m really new to Jquery, JavaScript, Html

In our WordPress shop, there’s an alert message that only appears if the user is below his set “Order Minimum Total”.

i’ve looked in the source code and i saw that when the message is not visible on the page, the DIV “wcc-validation” has “hidden” added in its Class.

That’s a copy of the code <div class="wcc-validation hidden" id="wcc-validation">

What we need is for our SideCart button to be set “display:none”, whenever wcc-validation message appears on the screen (doesn’t have the Class attribute of “hidden”)

Whenever wcc-validation message disappears and gets the Class Attribute “Hidden” – make the SideCart button appear on the screen. (display:block?)

I’ve researched a bit and realized this cant be done with CSS, I dont mind adding JS/Jquery snippets to make it work, but couldn’t figure out how to spot a DIV that has a “hidden” Class attribute in it – and apply the show/hide on the sidecart button from that.

thanks a lot.

adam

Answer

you can check for the class ‘hidden’ if it is available for the ‘wcc-validation’, Like the following snippet:

jQuery(document).ready(function($){
  
  if($('#wcc-validation').hasClass('hidden')){
     $('.to_hide').hide();
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcc-validation hidden" id="wcc-validation">
<div class="to_hide">to hide based on hidden class</div>

Advertisement

Answer