jquery — динамический аккордеон на странице WordPress PHP

У меня есть страница в WordPress, которая поднимает категории, а затем перечисляет все пользовательские типы записей в этой категории.

Я пытаюсь применить эффект аккордеона к категориям, чтобы все сообщения не отображались одновременно.

Вот шаблон PHP.

Я пробовал несколько решений, и либо разрывы страниц, либо аккордеон не работает.

<?php
/**
*
* Template Name: Online Courses Single Page
*
* The single post template. Used when a single post is queried.
*
*/

if(is_blog()){
return load_template(THEME_DIR . "/template_blog.php");
}elseif(is_front_page()){
return load_template(THEME_DIR . "/front-page.php");
}

$post_id = theme_get_queried_object_id();
$layout = theme_get_inherit_option($post_id, '_layout', 'general','layout');
$content_width = ($layout === 'full')? 960: 630;
get_header();
echo theme_generator('introduce',$post_id);?>
<div id="page">
<div class="inner <?php if($layout=='right'):?>right_sidebar<?php endif;?><?php if($layout=='left'):?>left_sidebar<?php endif;?>">
<?php echo theme_generator('breadcrumbs',$post_id);?>
<div id="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php get_template_part('content','page'); ?>
<?php endwhile; // end of the loop.?>
<!-- Begin custom tax loop -->
<?php
//Retrieve custom taxonomy terms using get_terms and the custom post type.
$categories = get_terms('course-category');
//Iterate through each term
foreach ( $categories as $category ) :
?>

<div class="online-course-category">
<h2><?php echo $category->name; ?></h2>
<ul>
<?php
//Setup the query to retrieve the posts that exist under each term
$posts = get_posts(array(
'post_type' => 'online-courses',
'posts_per_page'  => -1,
'orderby' => 'name',
'order' =>  'ASC',
'taxonomy' => $category->taxonomy,
'term'  => $category->slug,
'nopaging' => true,
));
// Here's the second, nested foreach loop that cycles through the posts associated with this category
foreach($posts as $post) :
setup_postdata($post); ////set up post data for use in the loop (enables the_title(), etc without specifying a post ID--as referenced in the stackoverflow link above)
?>

<li class="online-course-list">
<div id="online-course-container">
<div id="online-course-icons">
<?php if (get_field('course_has_power_points') == 'yes'): ?>
<?php if(get_field('course_has_power_points')) { echo '<span class="ppt-icon"><img src="http://americandreamreschool.com/wp-content/uploads/2015/09/1443334285_powerpoint2.png" /></span>'; } ?>
<?php endif; ?>
<?php if (get_field('course_has_pdfs') == 'yes'): ?>
<?php if(get_field('course_has_pdfs')) { echo '<span class="pdf-icon"><img src="http://williamstitle.com/wp-content/uploads/2016/01/1443385817_pdf.png" /></span>'; } ?>
<?php endif; ?>
<?php if (get_field('course_has_videos') == 'yes'): ?>
<?php if(get_field('course_has_videos')) { echo '<span class="video-icon"><img src="http://americandreamreschool.com/wp-content/uploads/2015/09/1443334308_24.TV_2.png" /></span>'; } ?>
<?php endif; ?>
<?php if (get_field('course_has_audios') == 'yes'): ?>
<?php if(get_field('course_has_audios')) { echo '<span class="audio-icon"><img src="http://williamstitle.com/wp-content/uploads/2016/01/1443385658_volume-24.png" /></span>'; } ?>
<?php endif; ?>
</div>
<?php if(get_field('course_title')) { echo '<div class="online-course-title"><h3>' . get_field('course_title') . '</h3></div>'; } ?>
<div id="online-course-registration">
<?php if(get_field('ce_credits_1')) { echo '<span class="ce-credits-1">' . get_field('ce_credits_1') . '</span> - '; } ?><?php if(get_field('price_1')) { echo '<span class="price-1">' . get_field('price_1') . '</span>'; } ?>
<?php if(get_field('register_for_price_1_url')) { echo '<div class="online-course-register-button1"><a href="' . get_field('register_for_price_1_url') . '" target="_blank">Register</a></div>'; } ?>
<?php if(get_field('ce_credits_2')) { echo '<span class="ce-credits-2">' . get_field('ce_credits_2') . '</span> - '; } ?><?php if(get_field('price_2')) { echo '<span class="price-2">' . get_field('price_2') . '</span>'; } ?>
<?php if(get_field('register_for_price_2_url')) { echo '<div class="online-course-register-button2"><a href="' . get_field('register_for_price_2_url') . '" target="_blank">Register</a></div>'; } ?>
</div>
<?php if(get_field('course_description')) { echo '<div class="online-course-description">' . get_field('course_description') . '</div>'; } ?>
<?php if(get_field('course_picture')) { echo '<div class="course-picture"><img src="' . get_field('course_picture') . '" /></div>'; } ?>
<?php if(get_field('descriptive_video')) { echo '<div class="course-video">' . get_field('descriptive_video') . '</div>'; } ?>
<?php if(get_field('disclaimer')) { echo '<div class="online-course-disclaimer">' . get_field('disclaimer') . '</div>'; } ?>
</div>
</li>

<?php endforeach; ?>

</ul>
</div><!-- .row -->

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<div class="clearboth"></div>
</div>
<?php if($layout != 'full') get_sidebar(); ?>
<div class="clearboth"></div>
</div>
</div>
<?php get_footer(); ?>