Прикольные скрывающиеся-открывающиеся блоки

Постовой: полипропиленовые трубы

Немного поменял дизайн сайта. В частности – слишком много разных ссылок, счетчиков и прочего не нужного в сайдбаре. Одним из способов, которым я скрыл лишнее – это открывающие блоки. Чтобы понять о чем я, посмотрите справа на этом сайте – нажмите на ссылку «…еще» в подписке или «больше!» в счетчиках.

То есть работает так. Предположим, мне нужно скрыть 10 счетчиков, которые на странице смотрятся довольно уродски. Засовываю их в такой вот блок, делаю ссылку. Юзер жмет на ссылку и ему открывается блок, а сама ссылка исчезает. Таким образом можно скрыть что угодно – «лишние» способы подписки (самый популярный RSS, а на остальное подписываются редко), какую-нибудь навязчивую инфу об авторе сайта, рекламные баннеры, категории, что угодно. Как это сделать?

Все замешано на JavaScript. Для любопытных подчеркиваю – все просто, это не Ajax, а именно JavaScript. Связано это с тем, что лично меня раздражает, когда жмешь на ссылку, а там еще что-то пару секунд грузится. Мгнованная загрузка – это сила. А чтобы она 100% была мгновенной, это должна быть предзагрузка (то есть все грузится «в фоне» во время загрузки основной страницы). В данном случае это не замедляет загрузку, т.к. сами блоки не объемные.

Для начала нам понадобится функция:

<script language=’javascript’>
function showblock(title){
document.getElementById(title + «-link»).style.display = «none»;
document.getElementById(title).style.display = «block»;
}
</script>

Эта функция позволяет сократить HTML-код (иначе бы пришлось все это писать в ставках вроде onclick). Добавьте ее, например, в файл header.php (если работаете с WordPress) или в другой файл шаблона. Можно непосредственно перед использованием.

Дальше. Заключаем то, что нужно скрыть, в блок div с такими параметрами: <div id=»more1″ style=»display: none;»>

Тут нужно обратить внимание на id (его будем передавать той функции) и на стиль, скрывающий div по умолчанию.

Теперь ссылка, чтобы этот див показывался. Понятно, что ссылка может быть где угодно, хотя логичнее всего на месте этого дива (над или под ним). Ссылка такого вида: <a href=»javascript: void(0);» id=’more1-link’ onclick=»showblock(‘more1′);»>…еще</a>

Обращаем внимание вот на что: такой href нужен, чтобы при клике не срабатывала прокрутка экрана (если поставить символ #, как обычно, то прокрутка сработает – это  не удобно). id задан не случайно: он состоит из id дива выше (more1) и приписки -link. Это нужно, чтобы наша функция могла отличать – ссылка это или сам div. По событию onclick вызывается наша функция, в которую передается имя дива ‘more1′ (функция делает видимым div с id ранвым переданному и скрывает ссылку с id равным переданному плюс ‘-link’).

Чтобы было понятнее, можете посмотреть исходник моего сайта. Или вот Вам маленький пример:

<a href=»javascript: void(0);» id=’aaa-link’ onclick=»showblock(‘more1′);»>показать</a>
<div id=»aaa» style=»display: none;»>
Код, который нужно скрыть.
</div>

Отзывов (13) на «Прикольные скрывающиеся-открывающиеся блоки»

пишет:
15.07.2009 в 6:09 пп


Классная фича! Спасибо!

---

пишет:
16.07.2009 в 11:56 дп


Очень круто, но, мне кажется, что кнопочка «свернуть», что бы опять спрятать, не помешала бы. Как такое сделать?)

---

пишет:
16.07.2009 в 2:18 пп


Что то у меня не получается Добавляю в сайтбар виджет «Текст». Туда вставляю код:

function showblock(title){
document.getElementById(title + “-link”).style.display = “none”;
document.getElementById(title).style.display = “block”;
}

больше!

[html-код и текст]

На сайте, в том месте, где располагается этот блок, ссылка «больше!» не нажимается! Может в коде какая ошибка? Сравнил с исходником этой страницы – у меня не было строки – добавил себе в код – не помогло, результат точно такой же. Как быть?

---

пишет:
16.07.2009 в 2:21 пп


блин, половины кода не показало

---

пишет:
16.07.2009 в 2:56 пп


bublik, напиши мне на почту, так непонятно.

---

пишет:
17.07.2009 в 10:58 дп


Дорвейщики сделали выводы… Сенкс

---

пишет:
17.07.2009 в 11:30 дп


Webpsyhopat, не понял о чем ты. На всякий случай замечание: ПС это все дело индексирует.

---

пишет:
17.07.2009 в 12:45 пп


Это и есть идея. Ныкание контента дора (того что дорген сгенерил – нечитаемого) от посетителей, а ПС проиндексит.

---

пишет:
17.07.2009 в 12:53 пп


Webpsyhopat, это называется клоакинг. ПС за такое банят сразу. Здесь все не так страшно – маленькие кусочки спрятаны.

---

пишет:
17.07.2009 в 3:35 пп


ну хз хз

---

пишет:
23.07.2009 в 11:34 пп


Сколько нужной информации нашла у вас! Спасибо!

---

пишет:
07.09.2009 в 4:36 пп


слушай, а не подкинешь мне идейку, а то я затупил что-то…
Вобщем, смысл такой: на Adsense у меня никто не кликает, поэтому родился зловещий план – чтобы получить ссылку на скачивание (или просто открыть статью) подставляется код адсенса, после нажатия на него появляется ссылка. Как это на яваскрипте реализовать?
Нет, ну гениальный план, посуте

---

пишет:
18.03.2010 в 9:52 пп


Для плавно открывающихся блоков можно использовать jQuery, с ним вообще все просто

---

Оставьте свой комментарий