How To Fix jQuery .show()/.hide() Issue

  javascript, jquery

I’m experiencing issues with a skip button on this page: https://blacklotusaudio.com/free-downloads/ that hides an offer and presents users with a simple checkout form via popup.

To see the part with issues, add a product to your cart and click the "get my free downloads now" button.

A popup will be shown, with the issue being that the "skip for now, I just want to download the free packs" button just doesn’t work.

Well, it does work on Chrome (but not in incognito mode?) but does not work on firefox or safari.

I’ve tried several different fixes, and I believe I’ve narrowed the issue down to the .skip-btn not properly hiding and then un-hiding the checkout form.

However, nothing I’ve tried has resolved the issue so I’m reaching out to the talented folks here. Maybe one of you can figure out what I’m doing wrong.

Here’s the code I’m currently using:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
   
    jQuery(function($){
       $('body').on('click', '.skip-btn', function () {
           $('.checkout-form-iframe').show();
           $('.hide-me').hide();
       })
    });
});
</script>
<style>
    .checkout-form-iframe {
        display: none;
    }
</style>

If you have any questions, etc. just let me know, I’m happy to answer and discuss.

Cheers!

Source: Ask Javascript Questions

LEAVE A COMMENT