Hello! There are 4 photos on the page, there are 4 paragraphs for each photo. Here you need to make the paragraphs appear, depending on the click on the photo.

<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>

Those. If one block is open, when clicking on a photo that belongs to another block, the “first” block should collapse. It should also be minimized when clicking on a photo that relates to this block.

I suppose you need to use slideToggle. But something like that I can not achieve the desired result. Tell me the right decision please :)

  • But why does the document contain 5 pairs of non-unique Aidi elements? - Kuroch

1 answer 1

Does doing what you need, but bring it to mind

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru"> <head> <title>Сворачиваемые блоки</title> <script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" language="Javascript"> $(function(){ $('p').hide(); $('img').click(function(){ $('p').slideUp(); var must_shown = $(this).closest('a').attr('href').slice('#'); $('p#'+must_shown).slideToggle(); }); }); </script> </head> <body> <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/1_.jpg"/></a> <a href="#about_3"><img id="author_3" src="{$template}/img/photo/1_.jpg"/></a> <a href="#about_4"><img id="author_4" src="{$template}/img/photo/1_.jpg"/></a> <p id="about_1">Раз раз раз</p> <p id="about_2">Два два два</p> <p id="about_3">Три три три</p> <p id="about_4">Четыре четыре четыре</p> </body> </html>

Thanks for the votes! Do not forget to close the question))