Самый простой способ - что-то вроде этого:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style>.wrapper div { display:none;}</style>
<script>
$(function() {
$('.wrapper h2').click(function() { $(this).next().toggle();});
});
</script>
</head>
<body>
<div class="wrapper">
<h2>Example header 1</h2>
<div>bodytext 1</div>
</div>
<div class="wrapper">
<h2>Example header 2</h2>
<div>bodytext 2</div>
</div>
<div class="wrapper">
<h2>Example header 3</h2>
<div>bodytext 3</div>
</div>
</body>
</html>
Я сделал простой рабочий пример здесь: http://jsfiddle.net/NXuQt/1/
Это не красиво, но должно дать вампростой шаблон, который вам нужен.
Обратите внимание, что в этом решении весь заголовок можно щелкать ... Я полагаю, что добавление изображения и его изменение в рамках события click - это то, о чем вы можете позаботиться самостоятельно, в противном случае дайте мне знать:)
Примечание: javascript основан на включении библиотеки jQuery.
РЕДАКТИРОВАТЬ: я обновил ответ, чтобы скопировать / вставить готовый рабочий код, причина, по которой вы не смогли заставить его работатькак бы то ни было, потому что я взял только самое необходимое из примера со скрипкой.Скрипка автоматически запустила инициализацию обработчика кликов в DOMready, в которую теперь встроен обновленный пример:)