Скрытый текст на JavaScript
Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "FAQ" вывести только названия вопросов. А если человека заинтересует ответ на определённый вопрос, то он может открыть ответ, а когда просмотрит, то и закрыть. Это создаёт удобство страницы и её компактность. И для этого я подготовил простенький скрипт на JavaScript, позволяющий открыть, либо скрыть определённый текст (в общем случае, определённые элементы), то есть сделать скрытый текст на JavaScript.
Результат: Кликните мышкой по названию вопроса. Если Вы кликните ещё раз, то ответ вновь закроется.
Вопрос №1
Вопрос №2
Код JavaScript (вставлять между тегами <head> и </head>):
<script language="JavaScript">
function expandit(id){
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}
</script>Код HTML (вставлять между тегами <body> и </body>):
<h4 style="cursor:pointer;" onClick="expandit('ans1')">Вопрос №1</h4>
<div id = "ans1" style="display:none">Ответ №1.</div>
<h4 style="cursor:pointer;" onClick="expandit('ans2')">Вопрос №2</h4>
<div id = "ans2" style="display:none">Ответ №2.</div> -
Создано 15.12.2010 19:42:14
-
Михаил Русаков
Комментарии (42):
Хорошая статья.Мне понравилось.Спасибо админу!
Ответить
Странно =), Вы раньше объесняли все теги нам в HTML. Конкретно все, а щас только одни таблицы... =О
Ответить
Во-первых, не все, а только действительно необходимые. А, во-вторых, где Вы в данной статье видите таблицы?
Ответить
Под таблицами я имел ввиду показы. Ну в HTML Вы нам все теги объесняли, какой тег какое действие выполняет.
Ответить
Цель данной категории (Скрипты на JavaScript) предоставить готовые скрипты с кратким описанием, демонстрацией результата и кода. А обучение JavaScript и HTML происходит в других категориях.
Ответить
А как делать, чтобы сущществовал данный адрес, когда уже зарегистрировал сайт. Например чтобы сущществовал http://mail.ru/vazhnayainformaciya? У меня проблемы с меню можете чем-то помочь?
Ответить
Чтобы страница существовала, необходимо её создать. Поэтому создайте папку vaznayainformaciya в корне сайта, и расположите в ней index.html.
Ответить
Вы не так поняли мой вопрос, я имел ввиду ну сущществует www.myrusakov.ru как зделать так чтобы нажал на один раздел из меню. И открылось новое окно например http://myrusakov.ru/skrytyj-tekst-javascript.html.
Ответить
Я же уже писал об этом. Добавьте ссылку <a href="http://myrusakov.ru/skrytyj-tekst-javascript.html">ссылка</a> на главную страницу.
Ответить
Ааа, тоесть это само создасться? skrytyj-tekst-javascript.html
Ответить
Эту страницу должны создать Вы.
Ответить
Так эти все пути сами не создаются?
Ответить
Пути задаются ссылками. Ссылки ведут на страницы. И эти страницы надо создавать. Извиняюсь, но у Вас очень слабые знания по HTML, поэтому советую посмотреть сначала бесплатный видеокурс: http://srs.myrusakov.ru
Ответить
Я имел ввиду вот этот путь skrytyj-tekst-javascript.html
Ответить
Я просто иногда называю его так=).
Ответить
Тоесть эту страницу www.****.ru/registraciya должен создать я, а потом направить ссылку на эту страницу да?
Ответить
Да.
Ответить
И у меня почему-то не обновилась инфо. о HTML, я недели 2 назад подписался на обновления, не че не изменилось.
Ответить
По HTML уже достаточно давно не было статей.
Ответить
Михаил, а можно ли сделать так, чтобы клик на вопросе №1 автоматически закрывал вопрос №2?
Ответить
Можно, для этого нужно обращаться к другому id и закрывать его. Или пройтись циклом по всем id, все закрыть, а затем открыть тот, на который кликнули. Хотя лучше первый способ.
Ответить
Михаил, без твоей помощи не обойтись. Если не трудно, напиши, пожалуйста, как это сделать
Ответить
Переписать весь скрипт надо. Вот пища для размышления: http://myrusakov.ru/uvelichenie-odnoj-kartinki-klik.html Если это не поможет, то продолжайте изучать JavaScript.
Ответить
Ты не поверишь, но я с начала пробовал изучить именно этот скрипт :)) Значит, не все так безнадежно)) Ладно, спасибо за совет!!!
Ответить
Час добрый, Михаил! Такой "скрытый текст" можно сделать на Вордпресс? Пробовал этот код вставлять - не получается:( Что можешь подсказать?
Ответить
А как менять текст по которму нажали? Например при открытии менять Вопрос №1 на Вопрос №1 [свернуть]?
Ответить
Передать помимо id блока с ответов, ещё и this (то есть сам заголовок), а внутри функции изменить свойство this.innerHTML = "Новая строка";
Ответить
function expandit(title, id){ obj = document.getElementById(id); if (obj.style.display == "none") { obj.style.display = ""; title.innerHTML = "Свернуть [-]"; } else { obj.style.display = "none"; title.innerHTML = "Развернуть [+]"; } } Вроде получилось
Ответить
Михаил, подскажи, как можно реализовать спойлер, который раскрывается плавно.
Ответить
Проще всего на jQuery, там есть методы fadeIn() и fadeOut() для этого.
Ответить
Спасибо
Ответить
Михаил, помогите. У меня валидатор заругался на onClick="expandit('ans1')", что делать?
Ответить
onclick пишите в этом случае, а не onClick.
Ответить
Здраствуйте, Михаил!)) нашел в одном коде такую строчку - <script src="new.js?0ac36" type="text/javascript"></script> хочу спросить, за что может отвечать параметр "0ac36"? убрал его - вроде все так же скрипт работает... спасибо)
Ответить
Это делается для избежания кэширования скрипта. Там идёт случайная строка каждый раз и тем самым скрипт не кэшируется и постоянно подгружается заново.
Ответить
но если у нас будет <meta http-equiv="pragma" content="no-cache">, надо ли ету строку писать?
Ответить
Необязательно.
Ответить
Михаил, а может ли ета строка служить еще для чего-нибудь? (посмотрел, она не обновляется, тоесть все время одна и та же)
Ответить
Она обновляется браузером. Но это не значит, что сам файл будет обновляться. Он-то никак и не должен меняться, пока его разработчики не захотят менять. Не путайте реальное обновление и кэширование.
Ответить
Благодарю за объяснение)хорошего Вам дня)
Ответить
Добрый день, хочу реализовать скрытие кнопки при ее нажатии. Но почему-то ничего не происходит <html> <head> <title>Button</title> <script type="text/javascript"> function hiddenClick(button) { var but = document.getElementById(button); but.style.display = "none"; } </script> </head> <body> <input type="button" id="button" style="display:block" value="Кнопка" onclick="hiddenClick(button)"/> </body> </html> В чем может быто проблема. Вроде код элементарный.
Ответить
Напишите в службу поддержки.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.