Links require 2 clicks in Safari & chrome, but only 1 in Firefox

Question

I'm working on this site http://church.allthingswebdesign.com and the links on the left require 2 clicks to get the li's to slide in, while in FF you only have to click it once. The desired result is to only have a user click it once.

Here's my jQuery:

//slides the left sidebar links when the button is clicked
$('div.links').hide();
$('div.boxes h3 a.button').click(function(e) {

    var $links = $(this).parents('div.boxes');

    $(this).parents().children('div.links').slideDown(500);
    $links.slideDown(500).animate({

        //if the left css property = 0, move it to the left as many pixels as it is wide,
        //else move it back to 0
        left: parseInt($links.css('left'),10) == 0 ? (-$links.outerWidth()-2) : 0
    }, 500);

    e.preventDefault();
})

Also, how do I make it so when you click the links on the left, that the light color isn't visible?

Answer 1

I'm pretty sure Safari has a default left position of auto while FF gives you a position in pixels.

Try testing the initial value of $links.css('left'). I'll bet that's the case.

In your CSS or javascript give the div.boxes a starting value of 0 or whatever and see if that helps.

Or instead of

$links.css('left')

Try

$links.position().left;