Help with jQuery Accordion

[runboston]

1. Here is a link to my page in question. http://www.jonathanfeanphotography.com/black/black.php?id=65. If you look towards the bottom left of the screen, there is a link titled ‘Show description’ that when moused over gives the description of the picture.

2. I will be the first to admit that I’m no expert in JavaScript or jQuery, so I basically took Chris’s Accordion example and modified it a little bit.

Code:

$(document).ready(function($) {
$(‘#accordion dd’).hide();
$(‘#accordion dt a’).hover(function(){
$(‘#accordion dd’).slideUp();
$(this).parent().next().slideDown();
return false;
});
});

3. My issue: I would like the description to hide once the user has moved their mouse off of it. I have tried a few different things, but nothing has worked, so I thought I would turn to the message board for an answer.

Thanks for your time and look forward to hearing your ideas.

Thanks,
Jon

[JaredAM]

You’ll have to use mouseover and mouseout

Code:

$(document).ready(function($) {
$(‘#accordion dd’).hide();
$(‘#accordion dt a’).mouseover(function(){
$(‘#accordion dd’).slideDown();
});
$(‘#accordion dt a’).mouseout(function(){
$(‘#accordion dd’).slideUp();
});
});

I’m not sure what the return false was supposed to do, but if you’re only going to have one element slide up and down you can use the $(‘#accordion dd’) selector instead of $(this).parent().next().

$(this).parent().next() would be useful if you’re going to have a bunch of things being shown/hidden as in Chris’ example (which is also why the .hide was inside the hover function).

[runboston]

Oh man, thank you so much, that is exactly what I was looking for. I really appreciate the help!

Take care,
Jon

[runboston]

Actually, one more question, rather than having it hide on mouseout, could I have it hide after a 5 seconds or something similar to that?

Thanks,
Jon

[JaredAM]

Yup, the slideup function is defined as slideup(time, callback) so just enter a value in milliseconds: slideUp(1000) or slideUP(‘slow’).

Also works for slideDown.

[BaylorRae]

If you want to slide the description after a few seconds try this.

Code:

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

var delay = null; // Stores the timeout
var time = 1000; // Time in milliseconds

var trigger = $(‘#accordion dt a’);
var description = $(‘#accordion dd’);

$(description.get(0)).hide();

$([trigger.get(0), description.get(0)]).mouseover(function() {
if(delay) clearTimeout(delay);

description.slideDown();
}).mouseout(function() {
if(delay) clearTimeout(delay);

delay = setTimeout(function() {
delay = null;

description.slideUp();
}, time);
});
});

[runboston]

Thanks a lot BaylorRae!

[Author]

Posts