Forums

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.

$(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


$(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.

$(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!

treehouse : what would you like to learn today?

Forums

Help with jQuery Accordion