Переходы между материалами для Ucoz

Рейтинг:3.0

Cворачивающиеся/разворачивающиеся блоки на куках

Установка:

1 вариант

Установка моих сворачивающихся блоков.

Вот сам код блока (вставляете, например, в конструктор шаблонов или меняете все блоки на эти):

Code

<div class="blocks">
<div class="btitle"><div class="bclick bclose" rel="bid1"></div>TITLE</div>
<div class="bcontent" id="bid1">CONTENT</div>
</div>

Здесь нужно помнить что bid1 должен быть уникальным для каждого блока, можно bid2, bid3 и т.д. Как Вам будет удобнее, но чтоб они не повторялись на странице.

Затем добавляете в CSS следущий стиль:

Code

.blocks {border:1px solid #cecece;margin:10px 4px}
  .bclose {background: url('http://s39.ucoz.net/.s/img/icon/minus.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
  .bopen {background: url('http://s39.ucoz.net/.s/img/icon/plus.png') no-repeat;width:16px;height:16px;float:right;cursor:pointer;margin-right:4px;}
  .btitle {padding:4px;padding-left:6px;font-weight:bold;}
  .bcontent {padding:10px;border-top:1px solid #cecece;}

Картинки можно поменять на свои.

И теперь ставите перед следующий скрипт:

Code

На этом заканчивается установка блоков с моим дизайном. Он очень прост, но имея желаение Вы можете изменить стиль под свои нужды.

2 вариант

Установка сворачивания/разворачивания на свои блоки.

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

И так, первое, что нужно сделать, это установить кнопочку сворачивания/разворачивания. Для этого в код Вашего блока перед названием вставляем следующей код:

Code

Должно получиться примерно так:

Code

<div class="bclick bclose" rel="bid1"></div>Название блока

Затем нужно добавить код к содержанию блока. Вот пример контента блока:

Code

<div style="border-top:0;" class="xw-mc contentBg">Тут контент</div>

Нужно добавить класс и айди:

Code

<div style="border-top:0;" class="xw-mc contentBg bcontent" id="bid1">Тут контент</div>

Если уже присутствует class, то просто через пробел дописывайте его, если существует id, то его нужно убрать и поставить этот (если тот айди используется для стилей, то заменить его на class).

После чего аналогично добавляете в CSS следующий стиль:

Code

И перед ставите всё тот же скрипт:

Code