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

Автор: | 21 февраля, 2018

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

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



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

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

А конкретней

Как это сделать? 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>

Раскрывающиеся блоки div: 6 комментариев

    1. Александр Крылов Автор записи

      Всегда пожалуйста )

      Ответить
  1. liosta

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

    Ответить
    1. Александр Крылов Автор записи

      Всегда пожалуйста )

      Ответить
  2. Аноним

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

    Ответить
    1. Александр Крылов Автор записи

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

      Ответить

Добавить комментарий для liosta Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *