[TRIGUN]

Добрый вечер всем.
Уже несколько дней не могу добиться конкретного результат с любых вариантов скриптов.

Суть такова:
Есть порядка 6 картинок. По 3 картинки в строку. Нужно, чтобы при клике на картинку под ней открывался блок с содержимым. При нажатии на другую картинку, первый блок закрывался и открывался второй. И так далее. Также чтобы при нажатии на ту же самую картинку, то ее содержимое скрывалось.
Еще момент, чтобы картинка и ее содержимое не двигало то, что находится справа или слева от нее и ее содержимого, но сдвигало то, что находится под ними.

Пробовал переделать такой вариант, но тщетно.

<style>
div.popup-credit{
  border:red 1px solid;
  display:none;
}
a.cancelComment {
  cursor:pointer;
  float:right;
  
  margin:-12px 12px;
}
</style>


                         <a class="pp-credit-block-button" href="#" onclick="return false">Открыть</a>
			 <div class="popup-credit">
				<div class="credit_block">
                                        <a class="cancelComment" title="Закрыть">X</a>
					<h2>Заголовок</h2>
					<p>Текст</p>
					<p>Текст</p>
					<p>Текст</p>
					<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
				</div>
			</div>



<script>
$(".pp-credit-block-button").click( function(){
  $(this).next(".popup-credit").toggle("fast")
});
$(".cancelComment").click( function(){
  $(this).parents(".popup-credit:first").hide("fast")
});
</script>

Вообще проблема в том, что непосредственно с картинками что либо не получается. И уж тем более, если картинки с подписями или прочим форматирование через css.

Очень прошу помочь вас.