• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Красивый вид спойлера (spoilera) на сайт uCoz
Красивый вид спойлера (spoilera) на сайт uCoz
XemorDioДата: Понедельник, 04.04.2016, 12:26 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline

Рассмотрим 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(); - второй блок по умолчанию свернут, скрыт.

Можно использовать данный скрипт, как для спойлеров, так и например создания аккордеонов.
 
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Красивый вид спойлера (spoilera) на сайт uCoz
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Рейтинг@Mail.ru