Показать сообщение отдельно
  #9 (permalink)  
Старый 27.03.2018, 17:20
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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 flag = 0, elt = el.firstElementChild;
		while(elt = elt.nextElementSibling) {
			console.log(elt);
			if(flag) elt.style.display = "none";
			if(elt.firstChild && elt.firstChild.textContent == ' pagebreak ') flag = 1;
		}
		el.insertAdjacentHTML('beforeend', '<button>Подробнее</button>');
	});

	[].forEach.call(document.querySelectorAll('.category-products-page-content button'), function(el){
		el.onclick = function(e){
			var elt = this;
			while(elt = elt.previousElementSibling) {
				if(elt.firstChild && elt.firstChild.textContent == ' pagebreak ') break;
				elt.style.display = elt.style.display == "none"? "block":"none";
			}
			e.target.textContent = e.target.textContent == "Подробнее"?"Cкрыть":"Подробнее";
		};
	});
</script>
Ответить с цитированием