problem with jquery toggle function

When I click the add as friend, I'm wanting the interactContainer to slide down, but it's not reacting to my clicks.

Here is the actual javascript
<script language="javascript" type="text/javascript">
//jQuery function for toggling add friend interaction container
function toggleInteractContainers(x) {
if($('#'+x).is(":hidden")) {
$('#'+x).slideDown(200);
}else {
$('#'+x).hide();
}
#('.interactContainers').hide();
}
</script>

here is the section of html that should be reacting to the javascript
<div class="addAsFriend"><?php echo $addAsFriend;?></div>
<div class="interactContainers" id="add_friend">
Add as a friend container
</div>

and here is the php
<?php
if(isset($_SESSION['user_id'])&& $_SESSION['user_id']!=$id) {
$addAsFriend ='<div><a href="#" onclick="return false" onmousedown="javascript:toggleInteractContainers(\'add_friend\');">Add as Friend</a>
</div>';
} else if(isset($_SESSION['user_id'])&& $_SESSION['user_id'] == $id) {
$addAsFriend ='<div>This is you</div>';
} else {
$addAsFriend = '<div><a href="signup.php">Sign Up</a> or <a href="login.php">Log In</a> to interact with ' . $first_name . ' ' . $last_name. '
</div>';
}
?>

You should remove the onclick() and onmousedown() events from the HTML, since you're using jQuery. One of the ideas of jQuery is to get the Javascript out of the HTML file and into your script file.

You should, instead, capture the event using the jQuery "ready" function (I use the shorthand syntax):


//replace selectorForYourLink with a selector for your link (use ID, or class, or html tag, or whatever)
//You should be able to use $(this) inside the function.
$(function() {
$("selectorForYourLink").click(function() {
if($("selectorForYourLink").is(":hidden")) {
$("selectorForYourLink").slideDown(200);
}else {
$("selectorForYourLink).hide();
}
#('.interactContainers').hide();
});
});


(this is totally untested and is only demonstrating the idea; it will probably require tweaking to get working the way you want it)

You might find using slideToggle() (http://api.jquery.com/slideToggle/) useful as well since that toggles the visibility and slides all in one function.

does the syntax at least seem correct? I'm REALLY new to javascript

Since you're new to jQuery, here's the helpful jQuery beginner's tutorial:

http://docs.jquery.com/How_jQuery_Works