Conceal a specific DIV class when another class is visible

Question

Conceal a specific DIV class when another class is visible

In my WordPress project, I am working on a customization where the add to cart button on the product page should remain hidden until the customer answers all the questions. The plugin I am using offers options for the customers to select, such as Step 1, Step 2, Step 3, etc. Once they reach the last step, the "Continue" button is deactivated and its class changes to .owl-next button disabled.

I want to use this class as a trigger to display the add to cart button only when it becomes active, and hide it otherwise. Currently, I have been successful in hiding the add to cart button, but I am facing difficulties in making it appear when required. Below are the codes I have experimented with so far:

<script>
var aVisible = $('.owl-next.button').css('display');
if (aVisible == 'none') {
}
</script>

<script>
if($('.owl-next.button').length){
   $('.single_add_to_cart_button.button.alt').hide();
}
</script>

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

Changes made on the last step:

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

javascript jquery css wordpress

Answer 1

Answer №1

Make sure to add an event listener to the button and verify if it has the class disabled. If it does, display your button using the following code:

$(document).ready(function(){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

The .hasClass() method checks for the presence of a specific class when the button is clicked and returns a boolean value. If true, it will show the button again.

UPDATE: To address the PHP syntax error:

If you're including the script in a PHP file, you may encounter an error. You can either replace <?php with <script> and ?> with </script> as mentioned here.

Alternatively, you can use:

jQuery(document).ready(function(){
   jQuery(document).on('click', '.owl-next.button', function() {
     let aVisible = jQuery(this).hasClass('disabled');
      if (aVisible) {
       jQuery('.single_add_to_cart_button.button.alt').show();
       }
    });
});

This approach prevents conflicts with PHP files.

If I wrap the script in <script> tags and place it in the header, I get "TypeError: $ is not a function" in the console

Always remember to include the JQuery library at the beginning of the script to avoid errors. If issues persist, wrap the code like this:

jQuery(document).ready(function($){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

Following this method should resolve any problems, see jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function for more information.

UPDATE 2: According to Wordpress stack exchange, a better way to handle the document.ready function is as follows:

(function($) {
    $('.owl-next.button').click(function() {
         let aVisible = $(this).hasClass('disabled');
          if (aVisible) {
           $('.single_add_to_cart_button.button.alt').show();
          }
    });
})(jQuery);

Answer 2

Make sure to add an event listener to the button and verify if it has the class disabled. If it does, display your button using the following code:

$(document).ready(function(){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

The .hasClass() method checks for the presence of a specific class when the button is clicked and returns a boolean value. If true, it will show the button again.

UPDATE: To address the PHP syntax error:

If you're including the script in a PHP file, you may encounter an error. You can either replace <?php with <script> and ?> with </script> as mentioned here.

Alternatively, you can use:

jQuery(document).ready(function(){
   jQuery(document).on('click', '.owl-next.button', function() {
     let aVisible = jQuery(this).hasClass('disabled');
      if (aVisible) {
       jQuery('.single_add_to_cart_button.button.alt').show();
       }
    });
});

This approach prevents conflicts with PHP files.

If I wrap the script in <script> tags and place it in the header, I get "TypeError: $ is not a function" in the console

Always remember to include the JQuery library at the beginning of the script to avoid errors. If issues persist, wrap the code like this:

jQuery(document).ready(function($){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

Following this method should resolve any problems, see jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function for more information.

UPDATE 2: According to Wordpress stack exchange, a better way to handle the document.ready function is as follows:

(function($) {
    $('.owl-next.button').click(function() {
         let aVisible = $(this).hasClass('disabled');
          if (aVisible) {
           $('.single_add_to_cart_button.button.alt').show();
          }
    });
})(jQuery);

Conceal a specific DIV class when another class is visible

Answer №1

Similar questions

Using AngularJs to implement a $watch feature that enables two-way binding

What are the steps to start up a NodeJS API using an Angular app.js file?

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Can node.js serve as a more efficient and sophisticated replacement for greasemonkey with database capabilities?

Unable to locate the input element using xpath

The Element Ui component fails to update when the prop of the Vue component changes

Could there be another script taking control of jQuery(window).resize()?

Tips for switching a group of buttons within a userscript by clicking a single button?

The z-index is not functioning properly in terms of layering correctly

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

Build an immersive experience by incorporating threejs into A-Frame to develop a spherical environment filled with 360-degree videos

Ajax pagination does not update the currently active link

Is it possible to customize the notification message displayed after clicking the save button in a listview within ng-admin?

In Three.js, objects are consistently displayed in a hierarchical manner, with each one appearing on top

Can $.ajax be used as a replacement for $(document).ready(function()?

Flex Display with Bootstrap for Responsive Tables

Storing array elements in a MySQL database through PHP and jQuery

When using a browser as a client, encountering an HTTP 405 error when attempting to make a POST request via $.ajax

Setting a uniform width for all columns in a table using ReactJS