Частенько нужно убрать часть текста со страницы так, чтобы его не было видно, поскольку иначе страница получается очень большой.
Например, чтобы было что-то типа такого (Нажмите на жирный текст, чтобы открыть блок, а потом ещё раз — чтобы закрыть):
Как создать раскрывающийся блок
А конкретней
Как это сделать? 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>
спасибо!!!!
Всегда пожалуйста )
Спасибо огромное, наконец-то нашла работающее решение!))
Всегда пожалуйста )
Подскажите а если к примеру 3 обычных варианта подряд идут, и я нажал на 1ый остальные закрылись, нажал на 2ой 1ый и 3ий закрылись, как подобное реализовать?
Сейчас так сходу не соображу. Поэтому посоветую такой способ: зайти на любой сайт, где такая штука реализована и взять оттуда код.