0

Здравствуйте! Есть 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. Но что то вот ни как не могу добиться нужного результата. Подскажите правильное решение пожалуйста :)

1
  • а к чему в документе 5 пар неуникальных айди элементов ?
    – Kuroch
    8 авг 2013 в 10:35

1 ответ 1

4

Делает делает то, что нужно, но до ума доводите сами

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

Спасибо за голоса! Не забываем закрывать вопрос))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.