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