Перейти к содержимому

Пример HTML страницы на которой сворачивается и разворачиваться блок (с текстом и т.д.), а также изменения которые скрипт вносит на страницу. (teg: свернуть, развернуть)

tast table div Этот примет который показывает как сварачиваеться и разварачиваються часть текста на странице. ——————————————————- 
<!-- 
Этот пример показывает как сворачивается и разворачиваться часть текста на странице. 

Как работает данная страницу:
При клике на блок с именем "toggle_toc()" выполняться функция с одноименным названием.

 -->


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>tast table div</title>
 <style>

 /* DivTable.com */

 </style>
 
 </head>
 <body>

Этот примет который показывает как сворачивается и разворачиваться часть текста на странице. 

<div>
	<a onclick="toggle_toc()">
	<span id="toc_mk">▼</span>Содержание
	</a>

	<div id="toc_sub" style="display: block;">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>

</div>
-------------------------------------------------------
<script>

// Скрипт делает:
// 	Уникальный блок с именем "toc_sub" (id="toc_sub") сворачивается и разворачивается, при каждом нажатии.
// 	Уникальная строка с именем "toc_mk" (id="toc_mk") заменяется на 2 разных символа показывающие свернут или развернут текст.
function toggle_toc(){
var sub = document.getElementById("toc_sub")
var mk = document.getElementById("toc_mk")
if( sub.style.display!="block" ){
	sub.style.display = "block";
	mk.innerHTML = "&#x25bc;";
} else {
	sub.style.display = "none";
	mk.innerHTML = "&#x25ba;";
}
}

</script>


   
 </body>
</html>

Добавить комментарий