Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.03.2018, 14:28
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

Как сделать спойлер для текста
Здравствуйте!
Есть текст, например:
<div class="category-products-page-content">
<p>Первая часть текста</p>
<p><!-- pagebreak --></p>
<p>Вторая часть текста</p>
</div>

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

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

Буду очень благодарен, если подскажете, как реализовать данную возможность.
Ответить с цитированием
  #2 (permalink)  
Старый 27.03.2018, 14:50
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2018, 15:26
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

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

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

<!-- pagebreak --> должен быть преобразован в кнопку, при клике на которую вторая часть текста должна отображаться. Как-то так.
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2018, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,856

kos0760,
а можно так ?
<p class="pagebreak "></p>
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2018, 15:48
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

Можно было бы, если бы я сам писал это все в редакторе. Добавил бы класс pagebreak к p и все. А так Писать тексты будет человек далекий от html и хочется максимально упростить ему работу. Чтобы он написал абзац нажал на кнопочку разрыв страницы, а далее все то что хочет скрыть. К сожалению, кнопка формирует только <!-- pagebreak --> и в этом вся проблема.
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2018, 16:01
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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


Допилил
Ответить с цитированием
  #7 (permalink)  
Старый 27.03.2018, 16:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,856

Сообщение от kos0760
Вторая часть текста, т.е. та которая идет после <!-- pagebreak --> должна быть на сайте изначально скрыта.
не знаю такое css правило ...
Ответить с цитированием
  #8 (permalink)  
Старый 27.03.2018, 16:24
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

j0hnik, спасибо, что активно помогаете. все получилось. почти. проблема в том что если во второй части несколько параграфов, то кнопка Подробнее отображается только после первого параграфа, идущего за <p><!-- pagebreak --></p>. А так вообще документ может содержать множество html тегов: и заголовки и картинки и т.д. То, что я привел в качестве примера - это упрощенный вариант. Разделять текст нужно будет после одного или нескольких абзацев и после разделения тоже может быть несколько абзацев, заголовков, картинок, как я уже писал выше. Т.е получается что скрыто должно быть все после <p><!-- pagebreak --></p> и до закрывающего </div>
Ответить с цитированием
  #9 (permalink)  
Старый 27.03.2018, 18: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>
Ответить с цитированием
  #10 (permalink)  
Старый 27.03.2018, 20:25
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 41

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив 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