РазделыКлиентамИспользование системы управлен... → Скрытие текста в статье.

Скрытие текста в статье.
Статья рассчитана на читателя, имеющего представления о HTML и JavaScript.

Для чего это может понадобиться?
Ну, например, для создания инструкций и описаний, например, щёлкните по ссылке "Инструкция":



Теперь как это работает.
За скрытие/показ отвечает функция showhide.
Вот её код:
Функция showhide: Код
<script type="text/javascript" language="JavaScript">
function showhide(obj){
if(obj == 'none') return 'inline';
else return 'none';
}
</script>
Соответственно, этот код нужно поместить где-то на странице, чтобы функция работала.
Теперь создадим Оглавление книги со ссылками на Главы
Функциональные элементы - оглавление и содержание - выделены разным цветом - для наглядности ;)
Функция showhide: Применение
<h2>БРАТЬЯ СТРУГАЦКИЕ</h2>
<h3>БЕСПОКОЙСТВО</h3>
<div>
<a href="#com_post"
onclick="document.getElementById('glava1').style.display =
showhide(document.getElementById('glava1').style.display)"
title="Нажмите, чтобы открыть или скрыть элемент">Глава 1
</a>
</div>

<br/>
<div id="glava1" style="display: none; width: 100%;">
<p>
С этой высоты лес был как пышная пятнистая пена, как огромная, на весь мир, рыхлая губка, как животное, которое затаилось когда-то в ожидании, а потом заснуло и поросло грубым мхом. Как бесформенная маска, скрывающая лицо, которое никто еще никогда не видел.
</p>
<p>
Леонид Андреевич сбросил шлепанцы и сел, свесив босые ноги в пропасть. Ему показалось, что пятки сразу стали влажными, словно он и в самом деле погрузил их в теплый лиловатый туман, скопившийся в тени под утесом. Он достал из кармана камешки и аккуратно разложил их возле себя, а потом выбрал самый маленький и тихонько бросил его вниз, в живое и молчаливое, в спящее, в равнодушное и глотающее навсегда, и белая искра погасла, и ничего не произошло – никакие глаза не приоткрылись, чтобы взглянуть на него. Тогда он бросил второй камешек.
</p>
<p>
– Так это вы гремели сегодня у меня под окнами, – сказал Турнен.
</p>
. . . </div>
<br/>
<div>
<a href="#com_post"
onclick="document.getElementById('glava2').style.display =
showhide(document.getElementById('glava2').style.display)"
title="Нажмите, чтобы открыть или скрыть элемент">Глава 2</a>
</div>
<br/>
<div id="glava2" style="display: none; width: 100%;">
<p>
Атос проснулся и сразу подумал: «Послезавтра мы уходим». И сейчас же в другом углу Нава зашевелилась на своей постели и спросила:
</p>
<p>
– Когда ты уходишь?
</p>
<p>
– Не знаю, – ответил он. – Скоро.
</p>
<p>
Он открыл глаза и уставился в низкий, покрытый известковыми натеками потолок. По потолку опять шли муравьи. Они двигались двумя ровными колоннами. Слева направо двигались нагруженные, справа налево шли порожняком. Месяц назад было наоборот. И через месяц будет наоборот, если им не укажут делать что-нибудь другое. Месяц назад я тоже проснулся и подумал, что послезавтра мы уходим, и никуда мы не ушли, и еще когда-то, задолго до этого, я проснулся и тоже подумал, что послезавтра мы уходим, и мы, конечно, не ушли, но если мы не уйдем послезавтра, я уйду один. Впрочем, и так я уже думал раньше, но теперь-то уж я обязательно уйду.
</p>
<p>
– А когда – скоро? – спросила Нава.
</p>
<p>
– Очень скоро, – ответил он.
</p>
. . . </div>
<br/>
<div>
<a href="#com_post"
onclick="document.getElementById('glava3').style.display =
showhide(document.getElementById('glava3').style.display)"
title="Нажмите, чтобы открыть или скрыть элемент">Глава 3</a>
</div>
<br/>
<div id="glava3" style="display: none; width: 100%;">
<p>
Голос дежурного произнес:
</p>
<p>
– Экстренный сеанс Д-связи. Земля вызывает Горбовского Леонида
Андреевича. Говорите, Леонид Андреевич...
</p>
<p>
Поль поднялся, чтобы выйти, но Горбовский сказал:
</p>
<p>
– Куда вы, Поль? Останьтесь! Какие у меня с Землей могут быть секреты? Да еще по Д-связи... Горбовский слушает, – сказал он в микрофон. – Это кто?.. Кто?! А если по буквам? Нет, на экране ничего не разберу... Ботва какая-то на экране... Бот-ва!.. Да... А-а, Павел?! Так бы и говорил. Ну как ты живешь?!
</p>
<p>
Связь была на редкость плохая. Изображение на экране напоминало полуразрушенную древнюю фреску, а Горбовский все время морщился и переспрашивал, вдавливая пальцем в ухо горошину репродуктора. Поль присел в кресло для посетителей и стал разбирать сводки.
</p>
. . . </div>


Как видно из кода, элементы <div> вызываются по id, например id="glava1"
Создаётся 2 прямоугольных элемента <div>, один служит ссылкой, другой открываетя и закрывается с помощью javascript
После всех манипуляций ОБЯЗАТЕЛЬНО сохраните статью в режиме html
Должно получиться вот что:

БРАТЬЯ СТРУГАЦКИЕ

БЕСПОКОЙСТВО







Согласитесь, это выглядит гораздо удобней и аккуратней.
Для онлайн-книг и инструкций - самое то.
При наведении мышки на элемент выводится всплывающая подсказка.
К тому же Главы открывать можно хоть все сразу, хоть по одной - кому как удобно.
Удачного кодирования!

03.06.2010 09:41 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Комментарии

admin
denis
10:41:49 17 Май 2011
В новой версии теперь правильно работает тег \"Спойлер\".
Статья уже не актуальна, скоро перенесу в архив.
admin
denis
09:17:07 08 Март 2011
Цитата:
Как с работоспособностью под разными браузерами?
Кроссбраузерно, конечно.
localghost
localghost
01:22:00 15 Январь 2011
Отлично. Закину в закладки. Скоро пригодится bravo
Как с работоспособностью под разными браузерами?pleasantry
admin
denis
18:49:48 30 Июнь 2010
Справедливости ради надо дополнительно отметить, что если скрыть текст в статье вышеуказанным способом Вам трудновато из-за недостатка знаний, в ReloadCMS имеется более простой, хотя и не идеальный способ.
В редакторе ReloadCMS существует недокументированный тег spoiler, который занимается примерно тем же, хоть и не столь красиво - закрыть назад открытую статью будет нельзя.
Примерно это будет выглядеть так:
+ Глава 1

Прочитать про недокументированные возможности ReloadCMS можно в этом же разделе статей, в одноимённой статье.

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.