jquery toggle not working with infinite scroll and masonry
-
13-11-2019 - |
Question
Basic setup is a series of divs that have additional info that slides down when a link is clicked. Works great for the first page of items, but any additional items display with the hidden div showing and the toggle link js doesn't work.
$(".hidden_info").hide();
$(".toggle_link").click(function(event) {
event.preventDefault();
$(this).closest(".item").find(".hidden_info").slideToggle("slow");
});
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item'
});
});
$container.infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : "#content div.item",
loading: {
msgText : "Loading new products...",
finishedMsg: 'No more products to load.',
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
-edit- Ok I have the toggle aspect working using the .on method. New code looks like this:
$(document).on("click", ".toggle_link", function(event) {
event.preventDefault();
$(this).closest(".item").find(".hidden_info").slideToggle("slow");
});
But the .hide stuff isn't working right. I may just end up switching what gets hidden so the content positioned above shows by default.
Solution
So switching around what's absolutely and relatively positioned wasn't a good option due to the dynamic heights of the elements. So I went with putting an inline style of display: none on the hidden divs. Not my favorite choice due to accessibility for people not using javascript. But it works.