JQuery <cut> спойлер - добавить "под кат" - модуль библиотека (пример)
Primary tabs
Очень хорошо с указанной задачей справляется вот эта штука (плагин JQuery):
http://plugins.jquery.com/spoiler/
Использовать данный плагин можно так:
Простой пример:
// блок-перключатель - именно по нему будем кликать <div class="spoiler" data-spoiler-link="2"> // в качестве кнопки можно взять. например, картинку (не важно что именно) <img src="show.png" title="Показать доплнительные параметры" alt="Показать доп. параметры"> </div> // далее блок, который будем скрывать или снова показывать при нажатии на выключатель <div class="spoiler-content" data-spoiler-link="2"> 12343 (какой-то текст) </div>
ВНИМАНИЕ: блок для "закрытия" выключателем выбирается на основе значения атрибута data-spoiler-link - этот атрибут должен совпадать у блока-выключателя и у скрываемого блока.
Более полный пример:
Теперь приведу пример, где можно регулировать скорость "появления" блока, и вообще "полнофункциональный" -
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Заголовок страницы </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<h1> Заголовок</h1>
// выключатель
<div class="spoiler" data-spoiler-link="2">
<span>[button]</span>
</div>
// содержимое блока
<div class="spoiler-content" data-spoiler-link="2" style="height: 16px" >
<span>text in spoiler</span>
</div>
// подключаем JQuery и jquery.spoiler.js (локально)
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.spoiler.js"></script>
// активируем плагин спойлера
<script>
console.log('start spoiler test');
$(".spoiler").spoiler();
</script>
</body>
</html>
CSS (некоторые из этих свойств точно придётся определить):
.spoiler {
color: #898;
left: 0.5m;
cursor: pointer;
}
.spoiler-active {
color: #bbb;
left: 0.5em;
cursor: pointer;
}
.spoiler-content {
/* задаём время открытия блока*/
transition: height 0.9s ease-out 0s;
}
.spoiler-content-visible{
height: 120px !important;
width: 120px !important;
background-color: #eee;
}
- Log in to post comments
- 5137 reads