CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reece Stevenson
Reece Stevenson

Reputation: 11

Hide a div based on another div display

I'm looking to change the display of one div based if another div has a style of display: block; Using class names as identifiers

<!-- if this div display is block -->
<div class="product alert stock">
  <a href="#" data-post="{&quot;action&quot;:&quot;https:\/\/www.99bikes.com.au\/productalert\/add\/stock\/product_id\/241114\/uenc\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\/&quot;,&quot;data&quot;:{&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,&quot;}}"
    title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-benefits">
  <div id="productBPG" class="row w-row">
    <div class="w-col w-col-12">
      <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee&nbsp; </span> <span class="subtitle">We'll&nbsp;beat&nbsp;any&nbsp;price&nbsp;by&nbsp;5%*</span></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;">
          <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%">
          <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p>
          <ul>
            <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li>
            <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li>
            <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn&nbsp;more&nbsp;here</a>.
            </li>
          </ul>
          <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 261

Answers (2)

Shashin Bhayani
Shashin Bhayani

Reputation: 1578

you can do it with JQuery by using condition to check if div is visible or not

if($('.product.alert.stock').is(':visible')) {
  $('.shipping-benefits').hide()
}

Here is working code snippet:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  if($('.product.alert.stock').is(':visible'))
  {
    $('.shipping-benefits').hide();
  }
});
</script>
</head>
<body>

<div class="product alert stock">
  <a href="#" data-post="{&quot;action&quot;:&quot;https:\/\/www.99bikes.com.au\/productalert\/add\/stock\/product_id\/241114\/uenc\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\/&quot;,&quot;data&quot;:{&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,&quot;}}"
    title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-benefits">
  <div id="productBPG" class="row w-row">
    <div class="w-col w-col-12">
      <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee&nbsp; </span> <span class="subtitle">We'll&nbsp;beat&nbsp;any&nbsp;price&nbsp;by&nbsp;5%*</span></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;">
          <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%">
          <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p>
          <ul>
            <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li>
            <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li>
            <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn&nbsp;more&nbsp;here</a>.
            </li>
          </ul>
          <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44107

Use some simple JavaScript:

if (document.querySelector(".product.alert.stock").style.display == "block") {
    document.querySelector(".shipping-benefits").style.display = "none";
}

Call this in a setInterval, and it will work.

Upvotes: 1

Related Questions