Красивый вид спойлера (spoilera) на сайт uCoz


Красивый вид спойлера (spoilera) на сайт uCoz

457
10 из 10
Проголосовало: 7






Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.

Разметка HTML
Вот два блока: первый с классом box и второй с классами box closed:

Код
<div class="container">
   
  <div class="box">
  <h2>
  Toggle (переключатель)
  <span class="l"></span><span class="r"></span>
  </h2>
  <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
  <div class="block">
  <div class="block_in">
  Контент 1
  </div>
  </div>
  </div>
   
  <div class="box closed">
  <h2>
  Toggle (переключатель)
  <span class="l"></span><span class="r"></span>
  </h2>
  <div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>
  <div class="block">
  <div class="block_in">
  Контент 2
  </div>
  </div>
  </div>


CSS
Для данного урока стили особо не важны, но на всякий случай выкладываю:

Код

.box {
  background:#fff;
  margin-bottom:20px;
  padding:0;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-box-shadow:0 0 10px #DCDCDC inset;
  -moz-box-shadow:0 0 10px #DCDCDC inset;
  box-shadow:0 0 10px #DCDCDC inset;
}
.box h2 {
  font-size:1em;
  font-weight:700;
  text-transform:uppercase;
  color:#444;
  background: #ddd;
  margin:0 -10px -1px -10px;
  padding:12px;
  padding-left: 15px;
  padding-right: 45px;
  -webkit-box-shadow:0 0 10px #DCDCDC inset;
  -moz-box-shadow:0 0 10px #DCDCDC inset;
  box-shadow:0 0 10px #DCDCDC inset;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
}

.block {
  padding:0;
}

.block_in {
  padding:12px;
}

.box div.hide {
display: block;
width: 40px;
line-height: 24px;
position: absolute;
right: 5px;
top: 8px;
cursor: pointer;
font-size: 10px;
text-transform: uppercase;
text-align: center;
border: solid 1px #aaa;
background: #f5f5f5;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:0 0 4px #DCDCDC inset;
-moz-box-shadow:0 0 4px #DCDCDC inset;
box-shadow:0 0 4px #DCDCDC inset;
}

.box div.hide:hover {
background: #fff;
}

.box div.hide span.h { display: block;}
.box div.hide span.s { display: none;}
.box div.show span.h { display: none;}
.box div.show span.s { display: block;}

.closed div.hide span.h { display: none;}
.closed div.hide span.s { display: block;}
.closed div.show span.h { display: block;}
.closed div.show span.s { display: none;}


javascript
Работаем с jQuery, поэтому не забываем её подключить в шапке.
Далее простенький скрипт:

Код

  $(".box .block").show();
  $(".closed .block").hide();

  $("div.hide").click(function(){
  $(this).toggleClass("show").next().slideToggle("medium");
  });


Cтрочка $(".box .block").show(); - первый блок показывается по умолчанию, то есть развернут;

строчка $(".closed .block").hide(); - второй блок по умолчанию свернут, скрыт.

Можно использовать данный скрипт, как для спойлеров, так и например создания аккордеонов.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 7

Go0o0ogle
0
Go0o0ogle написал: Написано 19 Января 2016 в 12:29
Комментарий №1
Вовчик привет!
Давно ищу такой скрипт, а можно ли сделать чтобы скрытый текст(hide) был не только для зареганных и по кол. сообщений на форуме, но и по нику и по репутации?
Я смотрю ты давно этим занимаешься, может посоветуешь чего.

Вовчик
0
Вовчик написал: Написано 19 Января 2016 в 12:34
Комментарий №2
привет, не понял чего ты хочешь...

Go0o0ogle
+1
Go0o0ogle написал: Написано 19 Января 2016 в 17:19
Комментарий №3
На форуме есть два типа хайда.
1. (hide)тест(/hide) виден текст только для зарегистированных. (в квадратных скобках)
2. (hide=10)тест(/hide) текст видят те пользователи, которые набрали 10 сообщений (в квадратных скобках)

а можно сделать так пример:
(hide=Вовчик)тест(/hide) чтобы текст видел только ты, как на других форумах не только на uCoz...я думаю ты видел уже такое

Marishka
0
Marishka написал: Написано 19 Января 2016 в 17:55
Комментарий №4
При желании можно!.. wink

Go0o0ogle
0
Go0o0ogle написал: Написано 19 Января 2016 в 18:46
Комментарий №5
Кто-нибудь поможет помочь?
До сих пор такого скрипта нету...

Marishka
0
Marishka написал: Написано 19 Января 2016 в 19:46
Комментарий №6
пока занята, если платно займемся сразу smile !. Не особа сложно чтоб все работала на стороне сервера и в исходном коде чтоб тоже не отображалось.

Go0o0ogle
0
Go0o0ogle написал: Написано 20 Января 2016 в 06:53
Комментарий №7
Сколько будет стоит?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 2
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: