Выдвиньте описание после нажатия на изображение в галерее

Div находится в одном и том же месте, потому что изображения выплывают из их родителя (LI). Это видно в Chrome Dev Tools, если вы наводите курсор на элементы списка.

Исправление состоит в том, что вы ничего не плаваете и чтобы LI display:inline-block чтобы они занимали пространство в dom. Вам также нужно добавить Javascript, чтобы увеличить высоту LI, чтобы разместить #test_div когда он добавится, потому что его позиционирование является абсолютным.

Полный код здесь: http://fiddle.jshell.net/MYXcf/3/

Обновлен код здесь: http://fiddle.jshell.net/MYXcf/5/

Вы должны добавить еще одно имя с именем div во все, что вы. Как это:

<div id="gallery">
    <ul>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
    </ul>
</div>

И некоторые css, чтобы создать это:

ul {
    list-style-type: none;
}
#gallery {
    height: 500px;
    margin: 0 auto;
    width: 500px;
    margin-top: 100px;
}
.click_images {
    vertical-align: top;
    display: block;
    position: relative;
}
.gal_images {
    height: 220px;
    width: 220px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin: 5px;
}
.image_item {
    width: 220px;
    float: left;
}
#test_div {
    position: absolute;
    top: auto;
    height: 200px;
    width:100%;
    background: #000;
    overflow: hidden;
}
.description {
    display: none;
}

И jQuery, переключится, если описание уже открыто или нет, если оно открыто, оно будет скрыто, иначе оно откроется.

var opened = false;
$('.image_item').click(function () {
    if (!opened) {
        opened = true;
        $(this).find('.description').slideDown('500').append('hahaha');
    } else {
        opened = false;
        $(this).find('.description').slideUp('500');
    }

});

Здесь вы найдете скрипку: http://jsfiddle.net/fm9L4/