Strange jQuery exception in Joomla 1.5

Question

I'm trying to create a set of boxes which, on hover, will disappear and their child boxes will appear. Then, when a user clicks on one of these child boxes a ul will be displayed or some content of some kind and that's it. My code works great in jsFiddle (you can see it here http://jsfiddle.net/kKvYS/ ) but when I insert it in a joomla article or a module it does not, and in the chrome debugger console appears the exception "Uncaught TypeError: Cannot read property 'defaultView' of undefined". This is my code:

HTML:

<div class="container lvl1 parent1">
        <div id="block-1" class="lvl1-block block"></div>

        <div id="block-1-1" class="lvl2-block group1 block">
            <ul class="details">
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
        </div>
        <div id="block-1-1" class="lvl2-block group1 block">
            <ul class="details">
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
        </div>
        <div id="block-1-1" class="lvl2-block group1 block">
            <ul class="details">
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
        </div>


    </div>

    <div class="container lvl1 parent2">
        <div id="block-2" class="lvl1-block block"></div>

        <div id="block-2-1" class="lvl2-block group2 block">

        </div>
        <div id="block-2-1" class="lvl2-block group2 block">

        </div>
        <div id="block-2-1" class="lvl2-block group2 block">

        </div>



    </div>

    <div class="container lvl1 parent3">
        <div id="block-3" class="lvl1-block block"></div>

        <div id="block-3-1" class="lvl2-block group3 block">

        </div>
        <div id="block-3-1" class="lvl2-block group3 block"> 

        </div>
        <div id="block-3-1" class="lvl2-block group3 block">
    </div>

Javascript:

var duration = 500;
var easing = "swing";
$(document).ready(function(){
$(".container").hover(function(){
    $(this).find(".lvl2-block").fadeToggle(duration, easing);
    $(this).find(".lvl1-block").fadeToggle(duration, easing);
}, function(){
    $(this).find("ul.details").fadeOut(duration);
    $(this).find(".lvl2-block").fadeOut(duration);
    $(this).find(".lvl1-block").fadeIn(duration);
});    


$(".lvl2-block").hover(function(){
    $(this).find("ul.details").fadeToggle(duration);
    $(this).find(".lvl2-block").fadeToggle(duration);
});    

});

CSS:

.lvl1-block{
display:block;
width: 100%;
height: 100%;
background: blue;
float:left;
position: relative;
z-index: 5;
}

.lvl2-block{
display:none;
width: 200px;
height: 60px;
background: red;
margin: 5px 0px 5px 0px;
position: relative;
z-index: 3;
}


.container{
float: left;
margin: 0px 5px 0px 5px;
width: 200px;
height: 200px;
position: relative;
position: relative;
z-index: 5;
}

.details{
display:none;
position: relative;
z-index: 1;
}

Answer 1

Add jQuery.noConflict(); in your jquery file.

Answer 2

Try to replace all "$" by a "jQuery" or just replace

$(document).ready(function(){

by

jQuery(document).ready(function($){