WordPress website - apply CSS when certain conditions are met

Question

This is the div on the website for a specific booking - in this example, the number 7568 is the tour ID.

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{&quot;tour-id&quot;:&quot;7568&quot;} >

For a specific tour ID, I want to hide another div on the page, so if the data booking details contains certain numbers, is there a way to apply CSS to another div on the page?

So if data-booking-detail contains 7568, hide the div that offers book now and pay later.

Answer 1

First, select a specific element. In your case, the element has the ID tourmaster-payment-template-wrapper , and you are looking for the attribute data-booking-detail ## that contains the value 7568 #.

This is an example of how to hide the second element:

#tourmaster-payment-template-wrapper[data-booking-detail*="7568"] + .hide-me {
  display: none;
}

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{&quot;tour-id&quot;:&quot;7568&quot;}"></div>

<div class="hide-me">I should be hidden</div>

Answer 2

You can use CSS to hide a div based on the presence or absence of a specific number in the data-booking-detail attribute. However, CSS itself cannot directly manipulate properties or their values. You need to use JavaScript or jQuery to achieve this functionality.

Here's an example of how to do this using JavaScript:

<div id="book-now-div">Offer: Book Now and Pay Later</div>


<script>
  // Get the data-booking-detail attribute value
  var bookingDetail = document.getElementById("tourmaster-payment-template-wrapper").getAttribute("data-booking-detail");

  // Check if the bookingDetail includes the specific tour ID
  if (bookingDetail.includes('7568')) {
    // Hide the div with id "book-now-div"
    document.getElementById("book-now-div").style.display = "none";
  }
</script>