Accordion panel in wordpress shortcode is not collapsing with custom post

问题

Accordion panel not collapsing with shortcode in custom post type. I can not add 'collapse class' in the accordion. It may be the issue in this case.

  jQuery(document).ready(function($){


        $(".panel-group .panel:first-child .panel-heading").addClass("active");
        $(".panel-group .panel:first-child .panel-collapse").addClass("in");
    });

This is the function I have in functions.php of my theme:

function acordian_shortcode( $atts ) {

    extract(shortcode_atts(array(

        'count' => '3',
        'id' => '1',

    ), $atts ) );

    $query = new WP_Query( array(
        'post_type' => 'accordian',
        'posts_per_page' => $count,

    ) );



       $list = '<div class="panel-group" id="accordion'.$id.'">';
 while ( $query->have_posts() ) : $query->the_post();


    $id = get_the_ID();
    $promo_icon = get_post_meta($id, 'promo_icon', true);

    $list .= '
       <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion'.$id.'" href="#collapse'.get_the_ID().'">
                                 '.get_the_title().'
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>

                         <div id="collapse'.get_the_ID().'" class="panel-collapse collapse">
                         <div class="panel-body">
                           '.get_the_content().'
                       </div>
                 </div>
            </div> '; 
    endwhile;
    $list .= '</div>';
    wp_reset_postdata(); 
    return $list;
    }

add_shortcode( 'accordian', 'acordian_shortcode' );

回答1:

Looking your code structure I assume that you want to create a Bootstrap accordion.

I ran your code in one of my sites, then copyed returned HTML to CodePen

<div class="panel-group" id="accordion1">...</div>

CodePen, and everithing works as it should. HTML is constructed properly from your php function.

So, I think, you just should check if your jQuery and bootstrap .js files are included properly.

来源：https://stackoverflow.com/questions/34800071/accordion-panel-in-wordpress-shortcode-is-not-collapsing-with-custom-post

标签

javascript

wordpress

accordion

shortcode