My jQuery accordion is working almost perfectly, but I have a minor issue. Currently, when I click on 'About Us', the element closes but quickly re-opens. I suspect this might be due to the code on line 27 of my CSS.
In the demo, you can see that the navigation is currently "open" because I'm on the "Team" page. Is there a way for me to close the element altogether when clicking on 'About Us'?
Here is the demo link: http://jsfiddle.net/URYzK/5/
This is the JavaScript I am using:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// Avoid setting up accordion for navigation links
return;
}
// Set up accordion pane
// Remove all the "Over" classes to reset the arrows
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
// Show/hide the selected submenu
$(this).siblings('ul').slideToggle("slow");
// Add/remove the "Over" class to change arrow direction
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
});
I appreciate any assistance with fixing this issue. Thank you!