Home › Forums › JavaScript › jquery/accordion help please
- This topic is empty.
-
AuthorPosts
-
October 16, 2012 at 4:05 am #40318lprintzParticipant
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 #111972JoniGiuroParticipantI 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 #111978lprintzParticipantHowdy!
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 #111979lprintzParticipantI 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 #111980JoniGiuroParticipantsorry, 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 #111992lprintzParticipantSO 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 openWas 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 #111996lprintzParticipantplayed 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 #111997JoniGiuroParticipantYou 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 #112001lprintzParticipantnada…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?’
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.