Форум Сайтостроение Веб-строительство

Скрытие текста

[Удален]
546

Дабы не перегружать текстом страницу сайта хочу сделать раскрывающиеся блоки, при нажатии на которые текст будет показываться или скрываться.

Пример, как здесь - тыц

Как лучше это реализовать? Так, чтобы текст нормально индексировался и участвовал в продвижении.

Через javascript я так понимаю лучше не делать?

izbushka
На сайте с 08.06.2007
Offline
110
izbushka
#1
sandazh:
Через javascript я так понимаю лучше не делать?

А какие у вас еще варианты на стороне клиента? :)

D
На сайте с 30.09.2008
Offline
107
DC***
#2

А в примере думаете как сделано? Не при помощи JS?

jQuery Accordion вам в помощь. Это с технической стороны.

А хорошо это или плохо с точки зрения ПС, не скажу. Мое ИМХО ничего плохого тут нет.

богоносец
На сайте с 30.01.2007
Offline
781
богоносец
#3
izbushka:
А какие у вас еще варианты на стороне клиента?

CSS 5

<!DOCTYPE html><html><head><meta charset="utf-8">
<title>:target (только для новых браузеров)</title>
 <style>
   body { width: 40%; }

   p { white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; }

   div:target .text { white-space: normal; }

   a.more { padding: 1ex;
	text-decoration: none;
	position: relative;
	left: 101%;
	top: 5em; }

   div:target .more { display: none; }

   a.q { display: none; }

   div:target .q { padding: 1.5ex;
	color:#990000;
	text-decoration: none;
	font-weight:700;
	position: relative;
	left: 101%;
	top: 5em;
	display: inline; }</style>
 <!--[if lt IE 9]><style>
   p { white-space: normal; }
   a.more, a.q { display: none; }</style><![endif]-->
 </head>
 <body>

  <h1>животные</h1>

  <div id="снусмумрики">
   <a class="more" href="#снусмумрики" title="читать далее">▼</a>
   <a class="q" href="#" title="закрыть">×</a>
   <h2>Снусмумрики</h2>
   <p class="text">Это такая нечисть, о которой даже вспомнить противно, читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее.</p>
  </div>

  <div id="ханорики">
   <a class="more" href="#ханорики" title="читать далее">▼</a>
   <a class="q" href="#" title="закрыть">×</a>
   <h2>Ханорики</h2>
   <p class="text">Эта нечисть ещё хуже, ну такая гнусная, ну такая гнусная читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее читать далее.</p>
  </div>

 </body>
</html>
[Удален]
#4
богоносец:
CSS 5 

<title>:target (только для новых браузеров)</title>

Богоносец, спасибо!

а что имеется ввиду под "новыми браузерами"?

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#5
sandazh:
а что имеется ввиду под "новыми браузерами"?

Имеется виду новые браузеры. По ссылке есть таблица браузеров поддерживающие :target

[Удален]
#6

на сколько я понял псевдокласс :target служит для быстрой навигации - помогает переместиться к нужной части документа. мне же нужно реализоавть скрытие/отображение контента.

или я не правильно понял?

KS
На сайте с 11.06.2012
Offline
17
KostaShah
#7
sandazh:
или я не правильно понял?

Неправильно. Для навигации служат якоря (#) в адресной строке. А класс таргет служит для задания стилей для того элемента, id которого указан в данный момент в якоре в адресной строке. То есть, он позволяет, в дополнение к прокручиванию страницы к нужному элементу, ещё и выделить его стилями. Стили, в данном случае, могут быть скрывающие и показывающие, что и прекрасно продемонстрировано богоносцем в его примере. Вы бы попробовали, тогда сразу правильно поймёте.

FileSafe (http://filesafe.anek.ws/) - мониторинг неизменности файлов сайта для защиты от взлома. Для форумчан - первый год бесплатно.
Яндекс обновил мобильный браузер Google Chrome будет показывать Google опубликовал серию твитов

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий