Как сделать спойлер для текста

[kos0760]

Здравствуйте!
Есть текст, например:

<div class="category-products-page-content">
<p>Первая часть текста</p>
<p><!-- pagebreak --></p>
<p>Вторая часть текста</p>
</div>

Состоит из двух частей, разделенным тегом <p><!-- pagebreak --></p>

Предполагаю, что тег нужно преобразовать в кнопку с текстом, например, "Подробнее" и при клике на нее должна показываться вторая часть текста, которая изначально скрыта. Но моими силами пока ничего не выходит.

Буду очень благодарен, если подскажете, как реализовать данную возможность.

[j0hnik]

<div class="category-products-page-content">
		<p>Первая часть текста</p>
		<p style="display: none">Вторая часть текста</p>
		<button>Подробнее</button>
	</div>

	<script>
document.querySelector('.category-products-page-content button').onclick = function(e){
	var el = e.target.previousElementSibling;
	el.style.display = el.style.display == "none"? "block":"none";
	e.target.textContent = e.target.textContent == "Подробнее"?"Cкрыть":"Подробнее";
};
	</script>

[kos0760]

Спасибо, но немного не то.

Текст будет писаться в текстовом редакторе обычным пользователем. В текстовом редакторе есть кнопка "Добавить разрыв страницы". Вот ее я и хочу использовать для реализации своей задумки. Кнопка формирует тег <!-- pagebreak -->, которым можно разделить текст на две части. Вторая часть текста, т.е. та которая идет после <!-- pagebreak --> должна быть на сайте изначально скрыта.

<!-- pagebreak --> должен быть преобразован в кнопку, при клике на которую вторая часть текста должна отображаться. Как-то так.

[рони]

kos0760,
а можно так ?

<p class="pagebreak "></p>

[kos0760]

Можно было бы, если бы я сам писал это все в редакторе. Добавил бы класс pagebreak к p и все. А так Писать тексты будет человек далекий от html и хочется максимально упростить ему работу. Чтобы он написал абзац нажал на кнопочку разрыв страницы, а далее все то что хочет скрыть. К сожалению, кнопка формирует только <!-- pagebreak --> и в этом вся проблема.

[j0hnik]

<div class="category-products-page-content">
	<p>Первая часть текста</p>
	<p><!-- pagebreak --></p>
	<p>Вторая часть текста</p>
</div>

<div class="category-products-page-content">
	<p>Первая часть текста</p>
	<p><!-- pagebreak --></p>
	<p>Вторая часть текста</p>
</div>

<script>

	[].forEach.call(document.querySelectorAll('.category-products-page-content>p'), function(el){
		if(el.firstChild.textContent == ' pagebreak ') {
			el.nextElementSibling.style.display = "none";
			el.nextElementSibling.insertAdjacentHTML('afterend', '<button>Подробнее</button>');
		}
	});

	[].forEach.call(document.querySelectorAll('.category-products-page-content button'), function(el){
		el.onclick = function(e){
			var el = e.target.previousElementSibling;
			el.style.display = el.style.display == "none"? "block":"none";
			e.target.textContent = e.target.textContent == "Подробнее"?"Cкрыть":"Подробнее";
		};
	});
</script>

Допилил

[рони]

Вторая часть текста, т.е. та которая идет после <!-- pagebreak --> должна быть на сайте изначально скрыта.

не знаю такое css правило ...

[kos0760]

j0hnik, спасибо, что активно помогаете. все получилось. почти. проблема в том что если во второй части несколько параграфов, то кнопка Подробнее отображается только после первого параграфа, идущего за <p><!-- pagebreak --></p>. А так вообще документ может содержать множество html тегов: и заголовки и картинки и т.д. То, что я привел в качестве примера - это упрощенный вариант. Разделять текст нужно будет после одного или нескольких абзацев и после разделения тоже может быть несколько абзацев, заголовков, картинок, как я уже писал выше. Т.е получается что скрыто должно быть все после <p><!-- pagebreak --></p> и до закрывающего </div>

[j0hnik]

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

[kos0760]

j0hnik, то что надо! поэксперементировал сам, вроде все работает. благодаря Вам сэкономил кучу времени. огромное спасибо!