As I don’t have the source code of your widget, I can only give you a general advice.
- When working with JS, always use Developer Console of your browser. You can detect JS errors or other messages there and also inspect HTML/CSS code easily.
- Before you can use a JS library, it has to be loaded in the browser, otherwise you’ll receive JS undefined errors.
Your widget is run after the function wp_head() has been called (=> after outputting the site header </head>), therefore wp_enqueue_script('jquery-ui-accordion'); outputs the accordion library in the footer of your site. However, your widget is run somewhere in the middle of the page and the accordion library has not yet been loaded into the browser (not yet outputted). If you inspect the Developer Console, you would observe an Uncaught TypeError: undefined is not a function.
There are two options how to fix this:
1. Enqueue the accordion library before the wp_head() is called. For example, in your functions.php, you could add a piece of code:
function lamosty_enqueue_accordion() {
wp_enqueue_script( 'jquery-ui-accordion' );
}
add_action( 'wp_enqueue_scripts', 'lamosty_enqueue_accordion' );
which does the trick. Action wp_enqueue_scripts is run during wp_head() execution.
2. If you want to enqueue the accordion library only on pages where the accordion is to be used, modify your JS code as shown below:
jQuery(function($) {
$("#accordion").accordion();
});
which is the same as calling
jQuery(document).ready(function($) {
$("#accordion").accordion();
});
What it does is that jQuery waits until the page is “ready” (=> everything has been loaded) and runs the inner function only after that. In this case, it doesn’t matter that the accordion library is loaded in the footer of the page because jQuery is waiting till everything is loaded, only then executing the function. You can read more about it on jQuery docs site.
