CODEWITHSUNDEEP
jqueryjquery-ui
KodeFor.Me
KodeFor.Me

Reputation: 13511

jQuery UI Accordion doesn't work

I have download and install the jQuery UI 1.8.17 and I try to apply the Accordion, but with no luck.

My code is the following:

HTML

<html>
<head>
    <title>Document Title</title>
    <link href="../../css/tinyMCE/jquery_ui_wp_theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="js/shortcodes.js"></script>
</head>
<body>
    <div id="codes">
        <h3><a href="#">Shortcode name</a></h3>
        <div><p>Dialog content</p></div>
        <h3><a href="#">Shortcode name</a></h3>
        <div><p>Dialog content</p></div></div>
    </div>
</body>
</html>

JavaScript

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

The problem with the above code is that, while the accordion is rendered properly, is not functional at all. That means, that when I click on a accordion panel header, there is no any action.

Also In my console I don't get any JavaScript error, and also all the files are loaded normally. Any idea on how to solve that problem ?!

This is the accordion as it is rendered

Upvotes: 0

Views: 4581

Answers (2)

thecodedeveloper.com
thecodedeveloper.com

Reputation: 3240

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to jQuery.noConflict();

see example here :

jQuery.noConflict();
(function($)
{
   $('#codes').accordion(); 
})
(jQuery);

Upvotes: 1

Rup
Rup

Reputation: 34408

You don't want the $ in your ready function signature:

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

You've probably copied this pattern from a plugin source, where it's generally used to ensure the plugin is using $ from jQuery and not e.g. prototype - you declare your plugin as an anonymous function then call it immediately passing a jQuery object. If the ready function accepts a parameter (I'm not sure it does, but the docs suggest it's a regular bound event) it'll be an event object and not a jQuery object.

Upvotes: 2

Related Questions