Question 183553 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – WordPress site – applying CSS when certain criteria are met

This is the div on the site for a particular 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 particular tour ID’s I would like to hide another div on the page so is there a way to apply CSS to another div on the page if the data-booking-detail includes certain numbers?

So if data-booking-detail includes 7568 then hide div that offers book now and pay later.

Tags:

2

Answers


  1. 0

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

    Here’s an example of how you can achieve 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>
    Login or Signup to reply.
  2. 0

    First, select the specific element. In your case, that 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 you could 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search