appendTo element after its clicked again

Question

Here is my js:

$('ul li div').hide();
$('ul li a').click(function(){
    var nextUp = $(this).next();
    if ($('.infobox').is(':empty')) {
        nextUp.appendTo('.infobox').slideToggle(400);
    } else {
        $('.infobox').empty();
        nextUp.appendTo('.infobox').slideToggle(400);
    }
});

and the HTML/working example is here: http://jsbin.com/ajizeh/3#

I'm trying to append content that is in the div after the link and append it to .infobox . It's half working though, it works the first time being clicked, but then if you click again, nothing appears. Also, the hiding when being clicked again isn't smooth like when it's showing.

So how can I get this to work, after clicking on another element.. let it show again, even after it's has been clicked once, also how do let the hiding be more smoothly?

Answer 1

Try this jsfiddle

I believe this is what you're looking for:

$(function() {
    $('ul li div').hide();

    $('ul li a').click(function() {
        var nextUp = $(this).next().clone();

        if ($('.infobox').is(':empty')) {
            nextUp.appendTo('.infobox').slideDown(400);
        } else {
            if (nextUp.html() != $('.infobox').children().html()) {
                $('.infobox').slideUp(400, function() {
                    $('.infobox').empty();
                    nextUp.appendTo('.infobox');
                    $('.infobox').children().show();
                });
                $('.infobox').slideDown(400);
            }
        }
    });
});

I changed the var nextUp to be clone of the div because if you just append the div to somewhere else on the page it moves it. So when you were trying to append it again, it was no longer there.

For the smooth slideUp I emptied the .infobox after the slide up was completed. That way it didn't just disappear.