Popup div shows after two clicks instead of one

Question

Sorry for the strange title, but I don't know any other way to describe it (improvements are welcome!).

I am trying to make a portfolio grid. When you click on one of the images a box appears under it, showing some information about the project. I've come pretty far, but bumped upon some strange behavior.

My HTML looks like this:

<ul class="pfGrid">
    <li>
        <a href="./">
            <img src="image.jpg" />
        </a>
    </li>
    ...
</ul>

And I've come up with this jQuery script to slide in and slide out the info box:

<script>
$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        // no default action when the link is clicked
        e.preventDefault();

        // hide any infobox that is visible
        $(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } );

        // if the image isn't allready active
        if( !$(this).hasClass("pfActive") ) {
            // remove the active class from the previous active item
            $(".pfGrid li a").removeClass( "pfActive");

            // add the info box, but hide it
            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            // slide down the infobox
            $(".pfInfo").slideDown();
            // make the image active
            $(this).addClass("pfActive");
        }
        // if the image is active, remove the class (info box is already hidden )
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});
</script>

The problem is: when I load the page and click the first image, the infobox shows up. When I then click the second image, the box shows but also immediately hides. Click it again and it shows. Then click the third image, the info box shows, the forth after two times, and so on...

After some debugging I figured out that the problem lies within $(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } );. I already tried other constructions with if-else, etc, but haven't got the answer yet.

Also check this JSFiddle.

Answer 1

Here you go

$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        e.preventDefault();

        // the problem seems to be in this line:
        $(".pfInfo").slideUp("normal", function() { $(this).remove(); } );
        //partially correct - when the slideUp animation, your previous function used to
        // also remove the newly created .pfInfo element - hence the $(this) replacement

        if( !$(this).hasClass("pfActive") ) {
            $(".pfGrid li a").removeClass( "pfActive");

            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            $(this).next().slideDown();
                 //second change, again the $('.pfInfo') was replaced with .next()
            $(this).addClass("pfActive");
        }
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});

Hope this brings some light on your matter

PS

Fiddle js is the way to go :D