Combine jQuery and jetpack infinite scroll

Question

I am using the following jQuery for an accordion effect on all my wordpress posts on the front end.

(function($) {
    function initAccordion() {  
        var $ele = $('.entry-content').hide();
        $(".entry-header").unbind('click').click(function(e) {
            e.preventDefault();
            var $ele1 = $(this).parents(".post").children('.entry-content').slideToggle('fast');
            $ele.not($ele1).slideUp();
        }); 
    } 

    initAccordion();

    $(document.body).on('post-load', function() { 
        initAccordion();
    });     
})(jQuery);

I am trying to get the script to work with infinite scroll but I have a problem that I am not sure how to solve.

Infinite scroll works by automatically displaying older posts when you scroll to the bottom of the page. This works as intended.

The jQuery in the provided code works by displaying one post at a time if a post title is clicked. The problem is that when you scroll to a new page with infinite scroll the opened post will automatically be closed.

You can see what I mean if you use the Live example here . Try to open a post, then scroll down until the URL displays .../page/2/ and the post you opened will be closed.

How can I avoid that the opened article is closed when scrolling to a new page?

Answer 1

try to change this line:

var $ele = $('.entry-content').hide();

to

var $ele = $('.entry-content').not('[data-did-load]').hide().attr("data-did-load", true);