...

View Full Version : problem with jquery toggle function



MattClark
03-14-2011, 01:48 PM
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>';
}
?>

Fumigator
03-14-2011, 03:02 PM
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)

SB65
03-14-2011, 06:42 PM
You might find using slideToggle() (http://api.jquery.com/slideToggle/) useful as well since that toggles the visibility and slides all in one function.

MattClark
03-14-2011, 10:14 PM
does the syntax at least seem correct? I'm REALLY new to javascript

Fumigator
03-15-2011, 07:20 PM
Since you're new to jQuery, here's the helpful jQuery beginner's tutorial:

http://docs.jquery.com/How_jQuery_Works



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum