Load jquery file inside a wordpress shortcode

i׳m trying to create an accordion shortcode.
when I load the scripts with wp_enqueue_script function it seams to work only for the jquery ui library but not the custom script

jQuery(document).ready(
    function() {
           $('#ks-accordion').accordion(); 
       }
);

Here is the full code:

Read More
// Container

function ks_accordion($atts, $content = null) {

    extract( shortcode_atts( array(
        'id' => ''
    ), $atts ) );
    wp_enqueue_script('jquery-ui-accordion');
    wp_enqueue_script('shortcode', get_template_directory_uri().'/functions/shortcodes/js/shortcodes.js');

    return '<div id="accordion">'.do_shortcode($content).'</div>';
}
add_shortcode( 'accordion', 'ks_accordion' );


// Section

function ks_accordion_section($atts, $content = null) {

    extract( shortcode_atts( array(
        'title' => 'My Title',
    ), $atts ) );

    return '<h6><a href="#">'.$title.'</a></h6><div><p>'.do_shortcode($content).'</p></div>';

}
add_shortcode( 'accordion_section', 'ks_accordion_section' );

This is the code I get in the front-end:

<div id="ks-accordion"><br>
  <h6><a href="#">Title</a></h6><div><p>Content</p></div><br>
  <h6><a href="#">Title1</a></h6><div><p>Content</p></div><br>
  <h6><a href="#">Title2</a></h6><div><p>Content</p></div><br>
</div>

Also I don’t get why it creates these <br>?

Thanks

Related posts

Leave a Reply

2 comments

  1. jQuery is loaded in noConflict mode in WordPress. To use the dollar sign, we need the following

    jQuery(document).ready( function($) { // <---- put $ here
        $('#ks-accordion').accordion(); 
    });
    

    Much probably, do_shortcode is inserting those <br>, but it’s just speculation.