How to test if DIV is open or closed after slideToggle

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') 
    re开发者_StackOverflow中文版turn 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

---

You have your condition backwards:

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

---

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");
        }
    });             
});

---

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)

---

i was doing the same but for an id based setup and then i found it worked when i used this instead

if ($(this).is(':hidden')) {
    var state = "closed";
} else {
    var state = "open";
}

alert($(this).attr('id') + ' is ' + state);
return false;           

---

why not just toggle or slideToggle it?

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

---

i think i understand what you want. from some button, that has nothing to do with adding images, users can hide and show icons. New images are added, with icons 'showing', and you have no idea on callback whether you should be showing the icons, or hiding them so they match the rest of the gallery.

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



 //code I am working on to put in callback to test if div is open or closed



       if($("#container").data()[iconStateIsHidden])
          {
// newly added images should match the rest of the gallery
        $('.icons').hide(); 
          }     
        else
          {
// newly added images should match the rest of the gallery
        $('.icons').show(); 
          } 

---

You use another method which is more robust and shorter. You can add an attribute,eg 'open' to the element. First time you read it is not there so it assumes it is the initial position. If it is '0' then you reverse it and in the condition block you do slidedown() or slideup()

This has many benefits: - you can read the value by browser debugger and see it changed - most useful is you can read that value using .each iterator and check for the ones that are open

function toggleBox(id) {
    let o = $("#box_" + id);    
    let op = o.attr("open") !== undefined;  
    if (op) {
        o.slideUp();
        o.removeAttr("open");       
    } else {
        o.slideDown();
        o.attr("open","1");     
    }   
}

---

slideToggle does not change visibility immediately. You need to hack around this

var hidden=$('#targetdiv').is(':visible'); //check the visibility before calling slideToggle
var $('#yourbuttonid').slideToggle(); //toggle it
if(hidden)
{ #put whatever you want to do here when #targetdiv is OPEN!
}
else
{ #content for when #targetdiv is CLOSED
}

hope this 10 years late answer works for you

I found this from a 7 years old post from https://forum.jquery.com/topic/state-of-slidetoggle