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?

Answer 1

Seems to work fine for me. Do you have anything else on the page that may be conflicting with the js?

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