Как сделать спойлер для текста
Здравствуйте!
Есть текст, например: <div class="category-products-page-content"> <p>Первая часть текста</p> <p><!-- pagebreak --></p> <p>Вторая часть текста</p> </div> Состоит из двух частей, разделенным тегом <p><!-- pagebreak --></p> Предполагаю, что тег нужно преобразовать в кнопку с текстом, например, "Подробнее" и при клике на нее должна показываться вторая часть текста, которая изначально скрыта. Но моими силами пока ничего не выходит. Буду очень благодарен, если подскажете, как реализовать данную возможность. |
<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>
|
Спасибо, но немного не то.
Текст будет писаться в текстовом редакторе обычным пользователем. В текстовом редакторе есть кнопка "Добавить разрыв страницы". Вот ее я и хочу использовать для реализации своей задумки. Кнопка формирует тег <!-- pagebreak -->, которым можно разделить текст на две части. Вторая часть текста, т.е. та которая идет после <!-- pagebreak --> должна быть на сайте изначально скрыта. <!-- pagebreak --> должен быть преобразован в кнопку, при клике на которую вторая часть текста должна отображаться. Как-то так. |
kos0760,
а можно так ? <p class="pagebreak "></p> |
Можно было бы, если бы я сам писал это все в редакторе. Добавил бы класс pagebreak к p и все. А так Писать тексты будет человек далекий от html и хочется максимально упростить ему работу. Чтобы он написал абзац нажал на кнопочку разрыв страницы, а далее все то что хочет скрыть. К сожалению, кнопка формирует только <!-- pagebreak --> и в этом вся проблема.
|
<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>
Допилил |
Цитата:
|
j0hnik, спасибо, что активно помогаете. все получилось. почти. проблема в том что если во второй части несколько параграфов, то кнопка Подробнее отображается только после первого параграфа, идущего за <p><!-- pagebreak --></p>. А так вообще документ может содержать множество html тегов: и заголовки и картинки и т.д. То, что я привел в качестве примера - это упрощенный вариант. Разделять текст нужно будет после одного или нескольких абзацев и после разделения тоже может быть несколько абзацев, заголовков, картинок, как я уже писал выше. Т.е получается что скрыто должно быть все после <p><!-- pagebreak --></p> и до закрывающего </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>
<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>
|
j0hnik, то что надо! поэксперементировал сам, вроде все работает. благодаря Вам сэкономил кучу времени. огромное спасибо! :thanks:
|
| Часовой пояс GMT +3, время: 16:50. |