а кажется разобрался, дело было в том что код который я нашел содержал ошибку
style="display: none;" кавычки не было. В итоге сейчас все работает. Может кому будет полезно выложу сюда как сделать спойлер:
в main.css :
/* стиль спойлера который нужно добавить в main.css*/
input[type="button"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
}
input[type="button"]:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
input[type="button"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
#spo {
border-top-color: #f0f5f5;
background: #f0f5f5;
color: gray;
}
/*конец спойлера*/
Где:
input[type="button"] - оформление кнопки по умолчанию
input[type="button"]:hover - оформление кнопки при касании
input[type="button"]:active - оформление кнопки при нажатии
#spo - область, содержимое спойлера
код который далее размещается в том месте где вы хотите видеть сам спойлер
<input onclick="$('#spo').toggle(500)" type="button" value="спойлер" /><div id="spo" style="display: none;" > сюда помещается то, что необходимо скрыть</div>
Где:
toggle(500) - скорость "открывания" спойлера (рекомендую поиграться с цифрами: на высоких значениях (1500) текст выстраивается побуквенно, на низких значениях (50) показывается моментально)
Если необходимо сделать 2 и более спойлеров на одной странице, например друг над другом то нужно добавить новое spo для нового спойлера, потомучто кнопка спойлера работает с тем spo, которое в нем указано:
пример:
#spo
2 {
border-top-color: #f0f5f5; /* в стили*/
background: #f0f5f5;
color: gray;
}
<input onclick="$('#spo
2').toggle(250)" type="button" value="спойлер2" /> <!-- куда надо -->
<div id="spo
2" style="display: none;">сюда помещается то, что необходимо скрыть2</div>
6
Vaccina (17 Январь 2013 - 00:10) писал:
Всё пока получается. Но теперь начну дальше двигаться и появится снова куча вопросов.
