Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.03.2018, 21:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,856


<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide ~ *{ display: none; }
  .hide ~ button{ display:  inline-block; }
  </style>

  <script>

  </script>
</head>

<body>
<div class="category-products-page-content">
  <p>Первая часть текста</p>
  <p><!-- pagebreak --></p>
  <p>Вторая часть текста</p>
  <img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
  <div>третья часть текста</div>
</div>

<div class="category-products-page-content">
  <p>Первая часть текста</p>
  <p><!-- pagebreak --></p>
  <p>Вторая часть текста</p>
  <img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
  <div>третья часть текста</div>
</div>

<script>

  [].forEach.call(document.querySelectorAll('.category-products-page-content'), function(el){
    var elt = el.firstElementChild;
    while(elt = elt.nextElementSibling) {
       if(elt.firstChild && elt.firstChild.textContent == ' pagebreak ') {
          elt.classList.add("hide");
          var button = document.createElement("button");
          button.textContent = "Подробнее";
          button.addEventListener('click', function() {
          elt.classList.toggle("hide");
          button.textContent = button.textContent == "Подробнее"?"Cкрыть":"Подробнее";
          })
          el.appendChild(button);
          break;
       };
    }

  });

</script>

</body>
</html>
Ответить с цитированием
  #12 (permalink)  
Старый 28.03.2018, 00:09
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

И Вам спасибо! Ваш вариант тоже неплохо подошёл.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
Как сделать drag для слайдера? sendik Элементы интерфейса 3 27.02.2017 09:27
Подружить jQuery Raphael.js и query.qtip.min.js (как сделать подсказки для отрисованн ufaclub jQuery 0 09.10.2014 21:08
Как сделать маску для рисунка Aljnk Общие вопросы Javascript 16 21.02.2011 17:08
Как сделать функцию типа toDataUrl для рисунка в ie6 ? Олег Общие вопросы Javascript 2 14.09.2008 00:06