Jquery toggle function breaks on pages that include mootools or slimbox script.

Question

My friend is asked me to look over her site where there is an error on pages that use slimbox-- an unrelated Jquery toggle function breaks— here's the code:

$(function() {
    $(".cat_nav dd").hide();
    $(".cat_nav dt").click(function() {
     $(this).next().toggle();
     return false;
    });
});

This code works fine when slimbox and mootools scripts are not present, but having either of those scripts load breaks it— the dt elements are not hidden and clicking on their respective dds doesn't toggle them hidden. Here is the error message from Safari's JS console:

TypeError: Result of expression '$(".cat_nav dd")' [null] is not an object.

This error only appears on pages that load slimbox or mootools, like so:

<script type="text/javascript" src="/js/mootools.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/slimbox.js" charset="utf-8"></script>

Is there a way to compose this that is compatible with slimbox? She is using slimbox to display galleries on some pages that use this function.

Answer 1

This article should help. Basically you need to call noConflict and use jQuery() to call your jQuery functions.

Answer 2

this error appears because of using $(".cat_nav dd"), you must use $$(".cat_nav dd") , because the $() function in mootools only take element id not CSS selector.