Смена картинки и раскрывающийся текст при клике

[lolopop12]

Здравствуйте. Только изучать начал и наткнулся на такую проблему: не знаю как добавить картинку(картинка со стрелкой вниз) и текст так, чтобы при клике на Текст с картинкой("Сколько стоят ваши услуги"), та картинка заменялась на другую(картинка со стрелкой вверх) и раскрывался текст"услуги сантехника.."
<div onClick="expandit(this)"><p style="cursor:pointer" >Показать/скрыть детальную информацию о о блоке текста №1</p>
<img src="img/arrow.png" alt=""></div>

<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №1
</span>
<p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №2</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №2
</span><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №3</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №3
</span><p style="cursor:pointer" onClick="expandit(this)">Показать/скрыть детальную информацию о о блоке текста №4</p>
<span style="display:none" style=&{head};>
Здесь пишем/вставляем блок текста №4
</span>
<script>
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:do cument.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
//-->
</script>

[laimas]

Это ради учебы или может быть использовать CSS анимацию можно?

[lolopop12]

Это ради учебы или может быть использовать CSS анимацию можно?
Ради учебы, но не совсем понял как с помощью анимации можно

[laimas]

В современных браузерах поддерживающих HTML5, CSS3 доступна анимация. В сети много о ней написано, о ее параметрах, даны примеры. В общем сложного нет, чтобы нельзя было понять.

А если страница в UTF, то стрелку рисовать не стоит, это может быть символ - ▼ (есть и ˅), который разворачивать анимацией.