I am making a shortcode in wordpress, including bootstrap accordion so that when I put the shortcode in the editor it gives me the posts title, image, categories, content etc. When I am putting bootstrap html in the post editor and make different shortcode for each posts entities, it’s working fine. But when I put the bootstrap html code inside the function.php and make one shortcode, everything is working only accordion collapse is not working. [i guess related to bootstrap javascript not working when html elements with classes are in the functions.php] function hello_elementor_child_scripts_styles() { wp_enqueue_style( 'hello-elementor-child-style', get_stylesheet_directory_uri() . '/style.css', [ 'hello-elementor-theme-style', ], HELLO_ELEMENTOR_CHILD_VERSION ); wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js', array( 'jquery' ), '', true ); } add_action( 'wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20 ); Here is my code [i already added bootstrap JS and CSS in functions.php] function program_post_list_acc($atts){ $post = get_the_post_thumbnail($atts['id'], 'medium'); $image = apply_filters( 'thumbnail', $post); $fullcon .='<div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#acc'. $atts['id'].'"><span class="program-class-thumb"><div style="display:inline-block;" >'. $image .'</div><div class="program-class-lines" style="display:inline-block;">'; $post_program = get_post($atts['id']); $tit = apply_filters( 'the_title', $post_program->post_title ); $fullcon .='<div class="program-class-firstline">'. $tit . '</div>'; $post_categories1 = get_the_terms( $atts['id'], 'teachers'); $post_categories2 = get_the_terms( $atts['id'], 'classes_durations'); $post_categories3 = get_the_terms( $atts['id'], 'classes_levels'); $post_categories4 = get_the_terms( $atts['id'], 'classes_purpose'); $post_categories5 = get_the_terms( $atts['id'], 'classes_style'); $categories1 = wp_list_pluck( $post_categories1, 'name' ); $categories2 = wp_list_pluck( $post_categories2, 'name' ); $categories3 = wp_list_pluck( $post_categories3, 'name' ); $categories4 = wp_list_pluck( $post_categories4, 'name' ); $categories5 = wp_list_pluck( $post_categories5, 'name' ); $categories = array_merge($categories2, $categories3, $categories4, $categories5); $fullcon .='<div class="program-class-secondline">'; foreach ( $categories1 as $cat): $fullcon .='<span class="program-class-tag1">'. $cat . '</span>'; endforeach; $fullcon .='</div>'; $fullcon .='<div class="program-class-thirdline">'; foreach( $categories as $category): $fullcon .='<span class="program-class-tag2">'. $category . '</span>'; endforeach; $fullcon .='</div></div></span></a></h4></div>'; $output = Elementor\Plugin::instance()->frontend->get_builder_content($atts['id']); $fullcon .='<div id="#acc'. $atts['id'].'" class="panel-collapse collapse"><div class="panel-body">'. $output .'</div></div></div></div>'; return $fullcon; } add_shortcode('program_post_list_accordian', 'program_post_list_acc'); All values are returning fine. Only accordion is not expending/collapsing Here I am sharing some screen shot: This screenshot- when i am adding html to post editor with using 4 shortcodes: more complicated Adding html from post editor, I have to make 4 shortcodes, but accordion is working very well, with all post datas but when I make only one shortcode and add all html to functions.php, this is the output, post data is there, even post content I can see from source code of web, but accordion now not working ie. not expending/collapsing I hope these screenshots will be helpful to solve the problem.