Grow your CSS skills. Land your dream job.

jquery/accordion help please

  • # October 16, 2012 at 4:05 am

    Howdy!

    I built a simple accordion for a menu but there are a couple of minor things I just can’t get right…I’m sure I’m just screwing up the jquery syntax!

    Please visit http://www.siphon-marketing.com/unifirst/V5/level2.html

    The menu I’m referring to is on the left.

    Only a couple of issues:
    1) on page load menu works fine with background on ‘hover’ and ‘expanded,’ however, once you start navigating the menu the ‘hover’ stops working
    2) When you navigate the lower menu items the page jumps to the top…I’ve never seen an accordion do this! Can this be fixed?

    Thanks so much!

    # October 16, 2012 at 8:35 am

    I would use css for the hover effect, this way you’re sure it’ll always work:
    .menu-item:hover{
    background-color:#999;
    }

    and I think adding “return false” or “event.preventDefault()” at the end of your jQuery function will fix the page jumping thing.

    # October 16, 2012 at 9:23 am

    Howdy!

    Unfortunately, I already have the ‘hover’ in and that didn’t do the trick. Here’s how I have it…

    .submenu_head:hover {background:#e6ead1 url(../images/collapsed_yellow.gif) center left no-repeat;}

    # October 16, 2012 at 9:26 am

    I added the javascript to try to prevent the jump but that’s not working either…it’s probably on me though as I’m sure I have the syntax wrong.

    Here’s the end of the script:

    # October 16, 2012 at 9:38 am

    sorry, maybe I did not explain well, this code should do the trick:

    $(‘.submenu_head’).click(function(e){
    e.preventDefault();
    $(‘.submenu_body’).slideUp(); //close all the sections
    $(this).next().slideDown(); //open the one you want
    });

    # October 16, 2012 at 11:32 am

    SO close!

    I replaced the entire thing with what you provided and now there are a couple of issues…

    1) icon doesn’t change to ‘expanded’
    2) if you click open and close one item, it keeps sliding open

    Was I supposed to keep some of my original code and implement yours somewhere?

    I’ll try that now.

    # October 16, 2012 at 11:42 am

    played around with integrating your code with what was there to no avail.

    It currently just has your code and works fine except for those couple of things.

    Here’s the original code for anybody’s reference…

    $(“.submenu_head”).click(function() {
    var expanded = ‘#E6EAD1 url(images/expanded_yellow.gif) center left no-repeat’,
    collapsed = ‘url(images/collapsed_yellow.gif) center left no-repeat’;

    if ( $(this).next().is(‘:hidden’) ) {
    $(this).siblings(‘.submenu_head’).css(‘background’, collapsed);
    $(this).siblings(‘.submenu_body’).slideUp(‘slow’);
    $(this).css(‘background’, expanded);
    $(this).next().slideDown(‘slow’);
    }
    else {
    $(this).css(‘background’, collapsed);
    $(this).next().slideUp(‘slow’);
    }

    });

    # October 16, 2012 at 11:52 am

    You could just check if the element is already open and use the “active” class to show the ‘expanded’ icon.

    $(‘.submenu_head’).click(function(e){

    e.preventDefault(); $(‘.submenu_body’).slideUp(); //close all the sections
    if($(this).hasClass(‘active’)){
    $(this).removeClass(‘active’);
    return false;
    }else{
    $(this).addClass(‘active’);
    $(this).next().slideDown(); //open the one you want
    }

    });

    # October 16, 2012 at 12:31 pm

    nada…not quite there as I need an ‘active’ background color and icon

    I’ve been playing around with another version which is closer – http://www.siphon-marketing.com/unifirst/V4/level2.html

    The ONLY issue with this is that I need to KILL the hover on an active item…you’ll see when you hover an active link I get the ‘plus’ icon

    Perhaps this is an easier ‘fix?’

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

You must be logged in to reply to this topic.

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