Show/hide effect for all list elements

Question

I'm trying to build image gallery with folders. When user press on folder name it hides all the pictures and shows only pictures for this folder. I have managed to do it but when images are hiding or showing they change move to one column and then animate. How can I make them to stay in-line all the time?

$('#folderList li').click(function () {
    var folderToShow = $(this).attr('id');
    $('#galleryList li').hide("slide", {}, 1000);
    $('#galleryList li.' + folderToShow).show("slide", {}, 1000).css("display", "inline-block");
});

Example jsFiddle

Answer 1

Add a float property in your CSS

#galleryList ul li {
    display: inline-block;
    margin: 10px;
    float:left
}