Спойлер — как скрыть, показать текст на JavaScript

Решение, как спрятать текст под спойлер с помощью чистого JavaScript без jQuery и прочих плагинов.

Демонстрация

Решение:

ВАРИАНТ1

В любом месте странички размещаем код скрипта:
<script>
function Spoiler() {
	var ele = document.getElementById("contentSpoiler");
	var text = document.getElementById("linkSpoiler");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Подробнее";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Скрыть";
	}
}
</script>
Это код кнопки, по клику развернётся текст:
<a href="javascript:Spoiler();" class="link_spoiler" id="linkSpoiler">Подробнее</a>
Это контейнер с текстом, по умолчанию он скрыт:
<div id="contentSpoiler" style="display: none;">
	<p>Однако политические учения Гоббса иллюстрирует современный англо-американский тип политической культуры. Капиталистическое мировое общество случайно. Политическое учение Августина доказывает коллапс Советского Союза. Социализм символизирует либерализм, указывает в своем исследовании К.Поппер. Идея правового государства, как бы это ни казалось парадоксальным, традиционно вызывает антропологический коллапс Советского Союза, что неминуемо повлечет эскалацию напряжения в стране. Международная политика иллюстрирует гносеологический либерализм.</p>
</div>

ВАРИАНТ2

<a href="javascript:Spoiler(1);" class="link_spoiler" id="linkSpoiler1">Подробнее</a>
<div id="contentSpoiler1" style="display: none;">
	<p>1111111111</p>
</div>

<br>

<a href="javascript:Spoiler(2);" class="link_spoiler" id="linkSpoiler2">Подробнее</a>
<div id="contentSpoiler2" style="display: none;">
	<p>2222222222</p>
</div>

<script>
function Spoiler(ID) {
	var ele = document.getElementById("contentSpoiler"+ID);
  alert(ele);
	var text = document.getElementById("linkSpoiler"+ID);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Подробнее";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Скрыть";
	}
}
</script>
Похожие решения:
Изменено: 14 03 2020
Просмотров: 5436

Написать комментарий (без авторизации) 9

Вариант 2 класс, но браузер постоянно говорит "Подтвердите действие [object HTMLDivElement]" и приходится нажимать постоянно ОК в браузере, т.е. подтверждать.
Ответить
Кстати и в хроме и в firefox пробовал...
Ответить
А с первым вариантом такого не наблюдается...
Ответить
Спасибо! Воспользовался первым вариантом.
Ответить
Спасибо за отличный и рабочий пример! Могли бы подсказать пожалуйста, если на одной странице несколько таких блоков, которые нужно показывать и скрывать. Как правильно это сделать ? Смена класса в других блоках не помогла..(
Ответить
Меняйте ID, например: linkSpoiler1 и contentSpoiler1, linkSpoiler2 и contentSpoiler2
Ответить
Но тогда получается что и весь код функции копировать нужно все время... Не ужели нет способа написать одну только функцию (для чего в принципе они и существуют), а после менять ID уже только DIV! ?
Ответить
Сделал ВАРИАНТ2
Ответить
Супер !!! Идеальное решение ! И полезное ! Теперь можно такой маленький скриптик поместить в кастомный плагин, и по всему сайту выводить инфо-блоки, на любой странице!
А для онлайн магазина например, можно к товару (динамически) выводить описание, или что то полезное... В общем куда только фантазии хватит ) Спасибо огромное за такое решение ! Сайт в закладки ! )
Ответить
Написать