Question

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):

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

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.

Answer 1

There are two problems with the slideDown. The first one is that you are only removing the class inactive after all the slideDown effect is complete. So, the nav is not visible during the whole effect.

$accordion.slideDown(1000, function () {
  $accordion.removeClass('inactive'); //Only executed after the slideDown effect being executed.
});

The second problem is that your ‘hack’ that executes the slide effect is wrong while the menu is inactive:

$accordion.slideDown(1000, function () { //$accordion.slideUp(0, function () {
  $accordion.removeClass('inactive'); //$accordion.removeClass('inactive').slideDown(1000);
});

You could simplify this code using slideToggle: http://jsfiddle.net/bpinto/aAQcJ/ which uses display:none to hide your nav.

One important thing to notice about the slideDown/slideUp function is that jquery will add a display:none style to control the element exhibition. So, I don’t see benefits on the hack – which controls the element appearance using its position.

Even though, I believe the slideToggle version is better, this is your updated code: http://jsfiddle.net/bpinto/smh8T/