Question

I have this problem that i’m sure is simple but I can’t seem to figure it out. I have a javascript function to toggle a div through pressing a button:

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>

My html code is (only part of it as it would be too long):

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

If you notice on the 5th line of the above html code, i have

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

This works; change it to this:

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

It does not work.
Can someone help me figure this out. Thanks.

The css code is(if needed):

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

Answer 1

Please take a look at this jsfiddle

i removed the onmousedown and place it into the onclick event. also removed the

$('.interactContainers').hide();

let me know if this is what you were looking for. also from your code we do not see a div with id=’add_pal’ and therefore there’s no add_pal div to hide or show.