Shortcodes spoiler does not seem to work with Infinite Scroll, help please!

Is this the plugin you’re using?
https://www.ads-software.com/plugins/shortcodes-ultimate/

If so, could you give me an example of a spoiler shortcode I could test things with, so I can take a closer look?

Thanks!

Yes that is the one! The spoiler shortcode is on the forth column from the left at the top. It looks like this… [su_spoiler title=”Answer” style=”fancy”]Text[/su_spoiler]. It works fine for the first set of posts but when infinite scroll pulls more pages the spoiler no longer functions. It will display but clicking on it will not reveal the spoiler.

I can’t seem to be able to reproduce the issue on my end. The “Answer” button seems to work. Could you check for Javascript errors on the page when you click on the button, as explained here:
https://codex.www.ads-software.com/Using_Your_Browser_to_Diagnose_JavaScript_Errors

Let me know what you find!

May I ask what theme you were using?

I used Twenty Thirteen in my tests, but Jetpack’s Infinite Scroll loads all extra posts the same way in all themes.

Do you see any JavaScript errors on your site when trying to use that Spoiler button?

Hi Jeremy,

I have made a fresh install of WordPress with the latest version of Jetpack and Shortcodes Ultimate. I have tested it in Opera, Chrome, Firefox & Internet explorer.

The spoiler tag does not display a spoiler for content that was loaded via infinite scroll. You can check it here… https://riddles.lol/ The first set of posts work just fine, but when additional sets of posts are loaded the spoiler shortcode no longer displays the spoiler when clicked.

• This reply was modified 7 years, 6 months ago by neobodhi.

Could you try to add the following code to a functionality plugin like this one, and let me know if it helps?

/**
 * Load our js when additional posts are loaded as well.
 *
 * @see https://www.ads-software.com/support/topic/shortcodes-spoiler-does-not-seem-to-work-with-infinite-scroll-help-please/
 * @see https://jetpack.com/support/infinite-scroll/#js-events
 */
function jeherve_reveal_is_spoilers() { ?>
<script type="text/javascript">
	( function( $ ) {
		$( document.body ).on( 'post-load', function () {
			$('.su-spoiler-content').removeAttr('style');
		} );
	} )( jQuery );
</script>
<?php }
add_action( 'wp_footer', 'jeherve_reveal_is_spoilers', 30 );

Thanks!

That did the trick! Thank you very much.