Question

I created homepage with 3 accordion tabs. The first tab is refreshing every 15 seconds. The second and the third tabs are a quick search page.

I was using jQuery to create accordion

$(function() {
    $( "#accordion" ).accordion();
});

var auto_refresh = setInterval(function() {
    $('#divFirstTab').fadeOut('fast').load('/home/refresher/').fadeIn("slow");
}, 15000);

When I am expanding the first tab, it seems to refresh page properly, but when I am in the second tab (which is users might spend sometime on this page), after 15 seconds, it refreshes the first tab and expands both first and second tabs, which I only want the second page to be expanded.

My idea is ignoring the auto-refreshing function if the first tab is hidden. How can I determine whether the first tab is hiding or expanding?

Answer 1

Check if the div has ui-accordion-content-active class

$(function() {
        $( "#accordion" ).accordion();
    });

    var auto_refresh = setInterval(
    function()
    {
        $div = $('#divFirstTab');
        if ($div.hasClass('ui-accordion-content-active'))
        {
           $div.fadeOut('fast').load('/home/refresher/').fadeIn("slow");
        }
    }, 15000);