Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Раскрывающийся и сворачивающийся по клику div (https://javascript.ru/forum/dom-window/46783-raskryvayushhijjsya-i-svorachivayushhijjsya-po-kliku-div.html)

Dilettante_Pro 07.07.2017 11:24

Вариант
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<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>

<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
       $a.not(this).text('Развернуть');
      $(this).next().slideToggle(500);
       $(this).text($(this).text()=='Свернуть'?'Развернуть':'Свернуть'); 
    });
});
</script>

  </body>
</html>

mikeac 10.10.2017 05:57

Dilettante_Pro,
А подскажите, пожалуйста, вариант, где "свернуть/развернуть" были бы в каждом случае оригинальные для каждого спойлера.
Т.е., например:
Развернуть 1 / Свернуть 1
Спрятанный текст 1
Развернуть 2 / Свернуть 2
Спрятанный текст 2

рони 10.10.2017 09:19

mikeac,
сложно придумать такую открывашку, которой ещё нет на форуме :lol:
Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке

Nexus 10.10.2017 09:46

рони, вы кинули ссылку с https протоколом, а в коде, что расположен на той странице jq подключается по http протоколу, поэтому ваш код будет нерабочим.
У некоторых пользователей могут возникнуть сложности с воспроизведением вашего кода.

рони 10.10.2017 09:54

Nexus,
добавил s :thanks:


Часовой пояс GMT +3, время: 16:52.