Grow your CSS skills. Land your dream job.

help with some jquery/javascript please

  • # October 8, 2012 at 3:41 pm

    Heya!

    I found the simplest, IE compatible, accordion I could find and it works perfect except for 2 ‘small’ things. I’m hoping a javascript guru can help me out…I’m sure I’m just screwing up the syntax :(

    Please check my page – http://www.siphon-marketing.com/unifirst/V5/level2.html

    There are 2 issues with the navigation on the left:

    1) I need the background color to remain when open or active
    2) If you click from tab to tab the icons change like they’re supposed to but try click ONE tab open and closed…the icon remains at the ‘expanded’ version

    I’ve tried EVERYTHING…can somebody help me?

    Thanks so much!

    # October 9, 2012 at 6:24 am

    you can do something like this with jQuery:

    $(“.submenu_head”).live(“click”, function(){ $(“.submenu_head”).css(‘background’, ‘white’); $(this).css(‘background’, ‘red’) });

    avoid inline css style unless it’s for email/etc where needed.

    # October 11, 2012 at 11:47 pm

    Try this, also don’t use .live() – it is deprecated in the latest jQuery.


    $(".submenu_head").click(function() {
    var expanded = '#E6EAD1 url(http://www.siphon-marketing.com/unifirst/V3/images/expanded_yellow.gif) center left no-repeat',
    collapsed = 'url(http://www.siphon-marketing.com/unifirst/V3/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 15, 2012 at 4:26 pm

    Hi elneco

    I’ve moved the page to http://www.siphon-marketing.com/unifirst/V5/level2.html

    We’re almost there! Your code works great on page load (background on ‘hover’ and ‘expanded’) however, once you start using the menu…the ‘hover’ no longer works :(

    One other thing…when you click the menu items at the bottom of the page, it ‘jumps’ to the top which is very clunky. I’ve never seen an accordion act like this! Any ideas?

    Thanks so much for your help!

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

You must be logged in to reply to this topic.

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