How to test if DIV is open or closed after slideToggle

Question

I have a Jquery Ui button ( #toggleIcons) that when clicked, toggles a div (.icons) to show some icons. I am also using Jquery Isotope and Infinitescroll to add new images dynamically. What I am trying to do is to have a way for the slideToggle state to be retained as the new images are added and updated. Ifinitescroll has a callback function so that I can update the page and state of the icons.

//My button click function
$("#styleSwitcher #toggleIcons" ).click(function() {
   $('.icons').slideToggle('slow');
   //for Isotope to update the layout
   $('#container').isotope('reLayout') 
    return false;
});

//code I am working on to put in callback to test if div is open or closed
if($(".icons").is(":hidden"))
{
  $('.icons').hide();
}
else
{
  $('.icons').show();
}

Not working. Any help or direction would be appreciated. thanks

Answer 1

You have your condition backwards:

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}

Answer 2

Put check state script in a function - let it hold a bit..

$('.advance-view').click(function() {
    $('#advance-control').slideToggle('slow', function() {
        if ($('#advance-control').is(':hidden'))
        {
            $('.advance-view').css("background-color", "#2B509A");
        }
        else
        {
            $('.advance-view').css("background-color", "#4D6837");
        }
    });             
});

Answer 3

I would use :visible

if($(".icons:visible").length > 0)
    //item is visible
else
    //item is not visible

but if you want to stick to your code

if($(".icons").is(":hidden"))

should probably read

if($(".icons").is(":hidden").length > 0)

Answer 4

why not just toggle or slideToggle it?

$(".icons").toggle();