The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

help with some jquery/javascript please

  • # October 8, 2012 at 3:41 pm


    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 –

    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

    This reply has been reported for inappropriate content.

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

    $(".submenu_head").click(function() {
    var expanded = '#E6EAD1 url( center left no-repeat',
    collapsed = 'url( center left no-repeat';

    if ( $(this).next().is(':hidden') ) {
    $(this).siblings('.submenu_head').css('background', collapsed);
    $(this).css('background', expanded);
    else {
    $(this).css('background', collapsed);

    # October 15, 2012 at 4:26 pm

    Hi elneco

    I’ve moved the page to

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed