Question

first, to be honest I’m a noob when it comes to Jquery. I’ve been watching a ton of tutorials and reading on the jquery site itself. While I am beginning to understand it, the concept hasn’t “clicked” for me as of yet.

I’m currently working on a product display to where I want a box to slide down when hovering over the product image. This box contains a list of the models.

I’ve got the page set up here:

http://www.tailwatersflyfishing.com/sage-fly-rods

This is the effect I’m trying to duplicate (one of our rod vendors)

http://www.sageflyfish.com/rods-landing.html

I’ve attempted writing the code, but have failed at getting it to work. This is what I currently have in the page:

$('document').ready(function () {
    $('.rod-tall').children('.rod-inner').children('.rod-list').hide();
    $('.rod-list ul div li ul li a').click(function() {
        window.location = $(this).attr('href');
    });

    $(".rod-tall .rod-inner").mouseenter(function () {
    $(this).children('.rodlist').children('.desc-box').slideToggle('fast');
    });

    $(".rod-tall .rod-inner").mouseleave(function () {
    $(this).children('.rodlist').children('.desc-box').slideToggle('fast');
    });
});

—-UPDATE—-

I now have this included in my page:

<script type="text/javascript">
   $(document).ready(function() {
   $('.rod-list').hide();
   $('.rod-tall').hover(function() {
   $('.rod-list',this).slideToggle('fast');
   },function() {
   $('.rod-list',this).slideToggle('fast');
  });​
</script>

All prototype errors are gone. BUT I am getting this error (Uncaught SyntaxError: Unexpected token ILLEGAL) which I hope is the cause of this script not working. Is there an invalid character or invisible character that causes this error?

Thanks!

Answer 1

How about this (jsFiddle example):

jQuery:

$('.rod-list').hide();
$('.rod-tall').hover(function() {
    $('.rod-list',this).slideToggle('fast');
},function() {
    $('.rod-list',this).slideToggle('fast');
});

CSS:

.rod-list {
    position:absolute;
}