Спойлер — как скрыть, показать текст на 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
Просмотров: 12505