Grow your CSS skills. Land your dream job.

Help with jQuery Accordion

  • # December 13, 2009 at 3:13 pm

    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

    # December 13, 2009 at 4:02 pm

    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).

    # December 13, 2009 at 4:07 pm

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

    Take care,
    Jon

    # December 13, 2009 at 4:24 pm

    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

    # December 13, 2009 at 4:59 pm

    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.

    # December 13, 2009 at 10:17 pm

    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);
    });
    });

    # December 15, 2009 at 7:51 am

    Thanks a lot BaylorRae!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".