Joomla 2.5, jquery hide() not working

Question

I need to hide/show div's with jquery in Joomla 2.5. I included the *.js files in default.php template with:

<?php
JHTML::script('jquery-1.11.0.min.js', 'templates/mytemplate/js/');
JHTML::script('bbbx.js', 'templates/mytemplate/js/');
?>

I have a simple div in my default.php template:

<div class="myclass" id="myid">
    <h1>Hallo</h1>
</div>

And my bbbx.js file looks like this:

$(document).ready(function() {
        alert("Your alert.");
        $("div.myclass").hide();
});

The bbbx.js file is found, alert is showing, but hide() doesn't work. The same code works perfectly well without Joomla. Please help, what is the problem here?

can you alert alert(jQuery === $), also check whether the element is present using alert($("div.myclass").length) — Arun P Johny
Most probably $ is colliding with another library and you would have to use noConflict method. — web-nomad
alert(jQuery === $) shows 'false' and alert($("div.myclass").length) is not coming up at all... — vogele
<script src="/newbbbx/plugins/system/jsntplframework/assets/joomlashine/js/noconflict.js" type="text/javascript"></script> is loaded by my template, but it is loading after my script. Should it be before my scripts? Where can I change the order? — vogele

zkanoca zkanoca · Accepted Answer · 2014-04-09T10:41:03

There should be a jQuery confliction. alert() works of course because it is not related to jQuery. It is a standard javascript function.

Try this please;

var myjq = jQuery.noConflict(); 
//myjq is just a suggestion you may try another word like vogele

myjq(document).ready(function() {
    alert("Your alert.");
    myjq("div.myclass").hide();
});

Also you must consider which jQuery library file comes first. Sometimes whne you change the <script> tags' order, the problem goes away.

Joomla 2.5, jquery hide() not working

2 Answers