CODEWITHSUNDEEP
phpjquerywordpressdynamicaccordion
guynumber6
guynumber6

Reputation: 35

Dynamic accordion on WordPress PHP page

I have a page in WordPress that pulls up categories and then lists out all of the custom post types in that category.

I am attempting to put an accordion effect on the categories so that all of the posts aren't just showing at one time.

Here is the PHP template.

I have tried multiple solutions and either the page breaks or the accordion doesn't work.

<?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(); ?>

Upvotes: 2

Views: 1487

Answers (1)

dg4220
dg4220

Reputation: 369

It looks like you're missing a couple of things - unless they're in other files. Make sure you've enqued the jQuery Accordion scripts - wp_enqueue_script( 'jquery-ui-accordion' ) and you need the javascript 

<script>
	jQuery(document).ready(function() {
	jQuery( '#accordion-container-id' ).accordion({
	heightStyle: 'content'
	});
	});
	</script>

Where accordion-container-id is the id of the element wrapping your accordion. (It may work with your class 'online-course-category'). Finally, I think you need to change your <h2> tags around the categeory name for for <h3> tags. That's how I got it all to work.

Upvotes: 2

Related Questions