Tutorial :jquery toggle only half working



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
Previous
Next Post »