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
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");
}
});
});
why not just toggle or slideToggle it?
$(".icons").toggle();