Site logo

Archived topic

Excerpt Action Hook

38 replies · Started by Andy on June 2, 2019

Viewing posts 16–30 of 39

No joy I'm afraid, still only works on posts above the load more button.

Can you share a link to your site so i can see whats happening with the infinite scroll and the toggle wrapper?

I'm developing locally using Local by Flywheel, I've added a public URL to my original post, but this will expire after a few hours, so hope it will be live long enough for you to see it.

You need to test posts that are loaded from Infinite Scroll, such as '5 Dales Route, Peak District'.

Apologies the posts weren't loading due the tunnel failing so didn't notice they hadn't changed. Not sure but could you try this instead:

jQuery('.generate-columns-container').on('click', '.accordion-toggle', function (event)
{
    event.preventDefault();
    jQuery(this).next().slideToggle('fast');
      
    //Hide the other panels
    jQuery(".accordion-content").not(jQuery(this).next()).slideUp('fast');
    
    //Switch toggle
    jQuery('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
    jQuery(this).toggleClass('toggle-open');
});

Excuse my poor jquery knowledge but does that need to go between <script> tags? as on it's own it just displays the code on the front-end.

Oops - yes within the Script tags

Hmmmmm, unfortunately not working at all now, not even on the posts loaded before infinite scroll.

Worth a try - can you remove the JS ( leave the CSS ) and if the tunnel is still open then i can take a look in the dev tools.

ok done, live link should still be working.

Try this function:

jQuery( document ).ready( function($) {
    var $container = $( '#main article' ).first().parent();
    toggleFunction();
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
        toggleFunction();
    } );
    function toggleFunction() {
        $('.inside-article').on('click', '.accordion-toggle', function (event)
        {
            event.preventDefault();
            $(this).next().slideToggle('fast');
            //Hide the other panels
            $(".accordion-content").not($(this).next()).slideUp('fast');
            //Switch toggle
            $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
            $(this).toggleClass('toggle-open');
        });
    }
});

Almost there! - It's working perfectly on posts loaded by Infinite Scroll, but on posts loaded on page load when you click the accordion it opens and then quickly closes by itself.

So if you only have infinite scroll on ( no load more ) then on page load they open and immediately close?

No, after pressing the load more button, the posts positioned above the load more button open and then close immediately, whereas posts positioned below the #nav-below container behave correctly.

This archived topic is closed to new replies.