Jquery script not working to alter CSS on change

0 Views

I’ve added some custom elements to be included with my WooCommerce account page to be seen with the order history. Unfortunately the page is setup with tabs to only display the information pertaining to the active tab.

I’m not very familiar with jquery, but I thought it would be simple enough to use Jquery to hide the divs I added when the order history has a display of none.

Read More

I added the following script to my theme’s main.js file: 

$(document).ready(function(){ 
    var display = $('.my_account_orders');
    if(display.css("display") == "none") {
        $('.paging-nav').css("display","none");
    }
});

When the class .my_account_orders has a display of none it should change the div I added (.paging-nav) to have a display of none. But it just doesn’t work.

Is there something wrong with this script or do I need to do something special to initiate it? Since it’s in my theme’s main.js file and I used $(document).ready(function() I figured it would just load with the page.

Any help with this would be greatly appreciated.

Post Views: 0

Related posts

4 comments

  1. Instead of using:

    var display = $('.my_account_orders');

    Implement it into the if statement like this:

    if($('.my_account_orders').css("display") == "none") {

    Because originally it is trying to find a variable called $display, so it would return a syntax error of undefined.

  2. You’ve got an errant $ in your if statement. This should work instead:

    $(document).ready(function(){ 
    var display = $('.my_account_orders');
    if(display.css("display") == "none") {
        $('.paging-nav').css("display","none");
    }
});

    Also keep in mind that your var display is only going to match the first element that has a class of my_account_orders, so if there are multiple elements with that class, and they don’t all have the same display, you could get unexpected results.

  3. Try this:

    $(document).ready(function(){ 
var display = $('.my_account_orders');
if(display.css("display") == "none") {
        $('.paging-nav').css("display","none");
    }
});

  4. I believe it’s a very lame way to check for a css property such as display to determine if an element is hidden or not. With jquery, you can make use of :hidden selector which determines whether an element is hidden and return a bool value.

    $(document).ready(function(){ 
    if($('.my_account_orders').eq(0).is(":hidden")) // eq(0) is optional - it basically targets the 1st occurring element with class 'my_account_orders'
    {
        $('.paging-nav').css("display","none");
    }
});

    Example : https://jsfiddle.net/DinoMyte/sgcrupm8/2/

Comments are closed.