Здравствуйте! Есть 4 фото на странице, есть 4 абзаца для каждого фото. Вот нужно сделать что бы абзацы появлялись в зависимости от клика по фото.
<a href="#about_1"><img id="author_1" src="{$template}/img/photo/1_.jpg"/></a>
<a href="#about_2"><img id="author_2" src="{$template}/img/photo/2_.jpg"/></a>
<a href="#about_3"><img id="author_3" src="{$template}/img/photo/3_.jpg"/></a>
<a href="#about_4"><img id="author_4" src="{$template}/img/photo/4_.jpg" style="float: none;"/></a>
<p id="about_1">Раз раз раз</p>
<p id="about_2">Два два два</p>
<p id="about_3">Три три три</p>
<p id="about_4">Четыре четыре четыре</p>
Т.е. если открыт один блок, при клике на фото которое относится к другому блоку "первый" должен сворачиваться. Так же он должен сворачиваться при клике на фото которое относится к этому блоку.
Я так полагаю нужно использовать slideToggle. Но что то вот ни как не могу добиться нужного результата. Подскажите правильное решение пожалуйста :)