Accessible toggle navigation

silatagaw

New Member
I'm looking for some help with an accessible toggle navigation I'm trying to create. By 'accessible' I mean that I'm trying to avoid 'display:none', which is added by default when you use jQuery slideUp and SlideDown.I've got as far as this: http://jsfiddle.net/6KX49/2/, which is a bad frankenstein of this that I found by Chris Coyier: http://jsfiddle.net/chriscoyier/zgtfA/1/. This is my script (more on the jsfiddle link):\[code\]var $button = $('.navigation-title a'), $accordion = $('.global-nav ul');$button.click(function () { if ($accordion.hasClass('inactive')) { $accordion.slideDown(1000, function () { $accordion.removeClass('inactive'); }); } else { $accordion.slideUp(1000, function () { $accordion.addClass('inactive').slideDown(0); }); }});\[/code\]It seems to be working - the collapsed navigation has a style of 'display:block;' so the 'display:none' is being over-riden somehow. I'm an absolute dummy when it comes to jQuery, so I can't honestly say that I really know how it's doing that.The problem I need help with is that the slideDown animation is not working. Any ideas why that might be? Any help appreciated.
 
Back
Top