Question

When I click my links using the onmousedown event I have to double click them for them to toggle. I am not understanding why this is so.

function toggleInteractContainers(x) {
//the 'x' variable represents the add friend/message container value
        if($('#'+x).is(":hidden")) {
        //if the container is hidden then we will slide it down and show it
            $('#'+x).slideToggle(400);

        } else {
            //if its not being hidden then we will hide it
            $('#'+x).hide();
        }
        //this just means we have to hide all the containers
        $('.interactContainers').hide();
}

I’m calling it from this div

<div class ="interactionLinksDiv">
           <a href="#" onclick="return false" onmousedown="toggleInteractContainers('add_friend');">Add Contact</a>
</div>          
<div class ="interactContainers" id ="add_friend">
  <div align ="right"><a href="#" onclick= "return false" onmousedown = "toggleInteractContainers('add_friend')">cancel</a></div>
                Add as a contact? &nbsp;
  <a href ="#" onclick="return false" onmousedown="javascript:addAsFriend(); ">Yes</a>  
</div>

I’m not getting any errors which is frustrating. I’d greatly appreciate it if I was told why this happened and what I could do to prevent it from happening again. Any programming tips along the way would be awesome as well.

Answer 1

Working demo Minor changes done: http://jsfiddle.net/FGqE7/

Please let me know if I missed anything!

Hope it fits the cause :)

Code

function toggleInteractContainers(x) {
    //the 'x' variable represents the add friend/message container value
    if (!$('#' + x).is(":visible")) {
        //if the container is hidden then we will slide it down and show it
        $('#' + x).slideDown(400);

    } else {
        //if its not being hidden then we will hide it
        $('#' + x).hide();
    }
    //this just means we have to hide all the containers
   // $('.interactContainers').hide();
}​