jquery/accordion help please

[lprintz]

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!

[JoniGiuro]

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.

[lprintz]

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

[lprintz]

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:

[JoniGiuro]

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

[lprintz]

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.

[lprintz]

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

});

[JoniGiuro]

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
}

});

[lprintz]

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?’

[Author]

Posts