Question:
My toggle() only half works...
$('#show_hide_comments').toggle(function() { $('#show_hide_comments').attr('src','images/up.png'); $('.comments').fadeTo('slow', 0.01, function() { $(this).slideUp('slow',function() { }); }); }, function() { $('#show_hide_comments').attr('src','images/down.png'); alert('wtf'); $('.comments').slideDown('slow', function() { $(this).fadeTo('slow', 1, function() { }); }); }); The first half that hides .comments works but the second half does not fire at all.
HTML:
<div class="comments_container"> <div class="show_hide_comments"><img id="show_hide_comments" src="images/down.png" width="19" height="10" alt="Expand" /> <div class="comments"> <div class="new_comment_container"> <div class="new_comment"><input id="comment" name="comment" type="text" value="your comment here..."></div> <div class="author"><input id="name" name="name" type="text" value="your name"></div> <div class="email"><input id="email" "name="email" type="text" value="your email"></div> <div class="comment_check"><input id="comment_check" type="image" src="images/uncheck.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Comment!" DISABLED></div> </div> <div class="captcha"> <div class="captcha_statment">Mostly Dirty, Always:</div><div class="captcha_response"><input id="captcha_response" name="captcha_response" type="text" value="" size="5" maxlength="5"></div> <div class="captcha_check"><input id="captcha_check" type="image" src="images/check.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Captcha!"></div> <div class="captcha_result"></div> </div> <div class="the_comments"> <?php $query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3"); while($comments = mysql_fetch_array($query)) { $date = date( 'F jS', strtotime($comments['date'])); echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>'; } ?> <div class="full_comments_toggle"><img id="full_comments_toggle" src="images/up.png" width="19" height="10" alt="Expand" /> <? $query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3,10000"); $count = mysql_num_rows($query); echo 'Show '. $count . ' more comments.'; ?> </div> <div class="full_comments"> <?php while($comments = mysql_fetch_array($query)) { $date = date( 'F jS', strtotime($comments['date'])); echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>'; } ?> </div> </div> </div> </div> </div> Since the JQuery seems to be ok... What kind of things would cause the toggle() to break half way through?
Solution:1
Seems to work fine for me. Do you have anything else on the page that may be conflicting with the js?
Solution:2
I didn't actually try your code, but one thing I noticed that you have the $comments[id] used as a DOM id both for the 'short' and the 'full' comments. This can break DOM manipulation in subtle ways (besides being invalid).
I suggest to change the part where you list the full comments like this:
echo '<div class="comment" id="full_'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>'; update: I tried your code and it works both in FF 3.6.6 and IE 8 (click -> fadeout, click -> 'wtf', fadein). I think the error is somewhere else.
Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
EmoticonEmoticon