Проблема с переключением div в Javascript

У меня есть эта проблема, которая, я уверен, проста, но я не могу понять это. У меня есть функция javascript для переключения div нажатием кнопки:

JavaScript:

<script type="text/javascript" charset="utf-8">
//jquery functionality for toggling member interaction containers
function toggleInteractContainers(x)
{
    if($('#'+x).is(":hidden"))
    {
        $('#'+x).slideDown(200);
    }else
    {
        $('#'+x).hide();
    }
    $('.interactContainers').hide();
}
//function for adding friends...receives two arguments
function addAsPal(a,b)
{
    //alert("Member with ID:" +a+ "is requesting to be pals with member with ID:" +b);
    var url = "request_as_pal.php";
    var thisRandNum = "<?php echo $thisRandNum; ?>";
    $("#add_pal").text("please wait...").show();
    $.post(url,{request:"requestPal", mem1:a, mem2:b, thisWipit: thisRandNum}, function(data){
    $("#add_pal").html(data).show().fadeOut(12000);
    });
}
</script>

Мой html-код (только его часть, так как это было бы слишком долго):

<tr>
    <td height="40" class="ordinary_text_12_blue" align="center">Username:</td>
    <td class="ordinary_text_12"><?php echo $row_user_info ['username'];?></td>
    <td align="right" style="border:none;">
        <a href="#" onclick="return false"
           onmousedown="javascript:toggleInteractContainers('add_friend');">
         Add as Pal
        </a>
    </td>
</tr>
</table>
<div class="interactContainers" id="add_friend">                     
    <div align="right">
        <a class="ordinary_text_12" href="#" onclick="return false"
           onmousedown="javascript:toggleInteractContainers('add_pal');">
         Cancel&nbsp;
        </a>
    </div>
    <div>
        &nbsp; Add &nbsp;<?php echo "$firstname $lastname"; ?>&nbsp; as a Pal? &nbsp;
        <a class="ordinary_text_12" href="#" onclick="return false"
           onmousedown="javascript:addAsPal(<?php echo $user_id;?>,<?php echo $user_id2;?>);">
          Yes
        </a>
    </div>                          
</div> 

Если вы заметили в 5-й строке приведенного выше HTML-кода, у меня есть

onmousedown="javascript:toggleInteractContainers('add_friend');

Это работает; изменить его на это:

onmousedown="javascript:toggleInteractContainers('add_pal');

Это не работает. Может кто-нибудь помочь мне понять это. Спасибо.

Код css (при необходимости):

.interactContainers
{
    margin-left:10px;
    position:relative;
    width:486px;    
    display:none;
    color: #09F;
    font-weight: bold;
    text-decoration: none;
    vertical-align:middle;
    font-size: 12px;    
    background-color:#222;
    border:#FFF 1px solid;  
}

.interactionLinksDiv a
{
    background-color:#222;
    display:inline;
    border:#FFF 1px solid;
    padding:7px;
    color:#9F3;
    font-size:12px;
    text-decoration:none;
}