Форум

kefalia · #1 (**permalink**) 23.04.2014, 23:40

Добрый вечер! Прошу найти решение задачи.

Есть несколько div, при клике на которые разворачивается скрытый текст:

<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>

$(document).ready(function(){                                                  
    $('.view-source .hide').hide();
    $('.view-source a').toggle(
      function(){
        $(this).siblings('.hide').stop(false, true).slideDown(500);
      },
     function(){
        $(this).siblings('.hide').stop(false, true).slideUp(500);
     }
   );
});

Как сделать так, чтобы развернутый div сворачивался при клике на любой из других div'ов - оберток (с классом view-source)? То есть, на один момент времени должен быть открыт только 1 скрытый div.

jsnb · #2 (**permalink**) 24.04.2014, 06:05

Кавычки у атрибутов надо закрывать...

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">111</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">222</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">333</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(document).ready(function(){                                                  
    $('.view-source .hide').hide();
    $('.view-source a').on('click', function() {
      $('.view-source .hide').slideUp(500);
      $(this).parent().find('.hide').slideDown(500);
    });
});
</script>

  </body>
</html>

kefalia · #3 (**permalink**) 24.04.2014, 09:19

Спасибо!

рони · #4 (**permalink**) 24.04.2014, 09:53

jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ...

Вариант

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">111</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">222</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">333</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>

  </body>
</html>

jsnb · #5 (**permalink**) 24.04.2014, 12:23

Сообщение от рони

jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ...

Да, спасибо за замечание.

Александр77 · #6 (**permalink**) 25.04.2016, 14:44

Здравствуйте, сделал отдельно все работает. Переношу на сайт, при нажатии выбрасывает на верх страницы и div не раскрывается. Думаю дело в ссылке "#" может можно чем-то заменить.Спасибо!

рони · #7 (**permalink**) 25.04.2016, 15:25

Александр77,
может забыли
function(event) {
event.preventDefault(); добавить?

Александр77 · #8 (**permalink**) 25.04.2016, 16:35

проблема в том что у меня на этой странице подключен слайдер и когда я подключаю библиотеку слайдер перестает работать

рони · #9 (**permalink**) 25.04.2016, 16:43

Александр77,
ненадо грузить много версий jquery достаточно одной

Александр77 · #10 (**permalink**) 25.04.2016, 16:46

я их заменил и слайдер перестал работать? с чем это может быть связанно

Форум

Справочник

Discord чат

Курсы javascript