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

Betthezel

Define not working. It seems to me it does not make sense, to hide() the .icons when they are already :hidden. Switch the statements in the if clause or test another element. – Hereld

does the button click have anything to do with adding images? or are they seperate actions? – Canyon

Answer 1

You have your condition backwards:

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

Neath

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

Phebe

Answer 3

why not just toggle or slideToggle it?

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

Burglarious

Answer 4

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)

Mannerless

Answer 5

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;           

Freespoken

Answer 6

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

Canyon

That is exactly right. If icons are showing, they should remain showing, etc. The button does not add images, just toggles the .icon div. Not getting the code to work yet but a good direction to go from. I appreciate the help!!! – Betthezel

I've just started really playing with .data(), and i would not doubt i may be using it incorrectly. also, $('icons').is(":hidden") will check all icons in the matched set. .is() will || check them, so if one is hidden then it returns true – Canyon

Answer 7

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

Oliphant

Answer 8

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

Andresandresen