jQuery slideUp not working correctly.

Question

I have an issue concerning the slideUp() method. It works only for the last element (Panel 3). The first two slide down and I have no idea why.. Please keep in mind that I just started with jQuery and I'm really a newbie.

Here is the jQuery code:

$(document).ready(function () {

    $('.panel').on('click', function() {
        $(this).slideUp(600);
    });

});

And here is the JSfiddle -> http://jsfiddle.net/py4tfq3f/2/

Thank you for your time!!

Answer 1

Change display:inline-block from the panel div to float:left,it solves the issue.

DEMO

CSS:

.panel {
    margin: 50px 0 0 10px;
    width: 200px;
    height: 200px;
    font-family: tahoma;
    float:left;
    border: 2px solid gray;
    border-radius: 5px;
    overflow: hidden;
}