To ajax filtered posts, I needed to put most of my index.php template into the functions.php file (followed this tutorial) and do from there.
But now javascript won’t work – basically the accordion style listings won’t open and close like they did before, trailers won’t embed, etc. Click on a tag to demo here.
Is there something wrong with how I’m calling js / do I need to wp_localize_script to get it working? Sorry I’m very new to this and Google hasn’t helped because I think I’m out of my depth.
How I’m calling JS scripts:
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style.css', get_stylesheet_uri() );
wp_register_script('jquery_script', get_template_directory_uri() . '/js/jquery-3.1.0.min.js');
wp_enqueue_script('jquery_script');
wp_register_script('my_script', get_template_directory_uri() . '/js/script.js');
wp_enqueue_script('my_script');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
What is in script.js
$(document).ready(function() {
// Open and close screelistings
$('.sl').find('.sl_closed').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".sl_open").not($(this).next()).slideUp('fast');
});
//Added class for opened and closed screenlistings
$(".sl").click(function(e) {
var isActive = $(this).hasClass('sl_active');
$('.sl_active').removeClass('sl_active');
$('.active').removeClass('active');
if (!isActive) {
$(this).addClass('sl_active');
$(this).find('.sl_closed').addClass('active');
}
});
// Replace feature image with trailer
$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
});
});