Александр Крылов

Раскрывающиеся блоки div

/ Просмотров: 8675

Частенько нужно убрать часть текста со страницы так, чтобы его не было видно, поскольку иначе страница получается очень большой.

Например, чтобы было что-то типа такого (Нажмите на жирный текст, чтобы открыть блок, а потом ещё раз - чтобы закрыть):

Раскрывающийся блок
Как создать раскрывающийся блок
А конкретней

Как это сделать? html + css + javascript.

Есть множество вариантов, поделюсь с вами теми, которые понравились мне самому

Просто скопируйте в файл html и откройте в браузере

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Раскрывающийся блок</title>
<style>
.ptr {
	cursor: pointer;
}</style> 
<script type="text/javascript" language="javascript">
var ch_disp = function( id )
			{
				var el = document.getElementById( id );
				el.style.display = ( el.style.display == 'block' )? 'none' : 'block';
			}
		</script>
</head>
<body><DIV CLASS="ptr" ONCLICK="ch_disp('A1')" STYLE="margin-bottom: 5px; font-weight: bold">Как создать раскрывающийся блок
</DIV>
<DIV ID="A1" STYLE="margin: 0 0 10px 10px; display:none">Да как-нибудь можно</DIV>
<div class="ptr" onclick="ch_disp('A2')" style="margin-bottom: 5px; font-weight: bold">А конкретней
</div>
<div id="A2" style="margin: 0 0 10px 10px; display:none">Просто нужно скопировать текст</div>
</body>
</html>

Второй вариант

Раскрывающиеся блоки

Один раз щёлкните сюда, чтобы открыть

Чтобы сделать эту штуку, скопируйте следующий код в файл html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Раскрывающиеся блоки</title>
</head>
<body>
<a onclick="javascript:document.getElementById('subMenuTip0').style.display='block'" ondblclick="javascript:document.getElementById('subMenuTip0').style.display='none'" href="javascript:void(0)">Один раз щёлкните сюда, чтобы открыть</a>
<div id="subMenuTip0" style="display:none; text-align:left;">
Теперь два раза щёлкните по заголовку, чтобы закрыть 
<a onclick="javascript:document.getElementById('subMenuTip0').style.display='none'" href="javascript:void(0)">Либо один раз щёлкните для закрытия вот сюда</a>
</div>
</body>
</html>

Комментариев: 4 RSS

1 Аноним 29-03-2014 01:56

Подскажите а если к примеру 3 обычных варианта подряд идут, и я нажал на 1ый остальные закрылись, нажал на 2ой 1ый и 3ий закрылись, как подобное реализовать?

2 AldeX 05-05-2014 10:00

Сейчас так сходу не соображу. Поэтому посоветую такой способ: зайти на любой сайт, где такая штука реализована и взять оттуда код.

3 liosta 15-06-2015 04:01

Спасибо огромное, наконец-то нашла работающее решение!))

Оставьте комментарий!


Комментарий будет опубликован после проверки

     

  

MaxSiteAuth.

(обязательно)