Главная » 2014 » Октябрь » 20 » Удобный вид материалов для модуля FAQ (Скрипты для ucoz)
20.10.2014, 16:58

Удобный вид материалов для модуля FAQ





Удобный вид материалов, разработанный для для модуля FAQ

При клике левой кнопкой мыши на вопрос, происходит плавное разворачивание ответа.

1) ПУ-->Управление дизайном-->Настройки модуля. Поля для добавления материалов: Тема вопроса (ставим две галочки). А остальные снимаем.

2) ПУ-->Управление дизайном-->Общий вид страниц Faq. Находим $BODY$ и обводим его тегом, вот так:
Код
<div class="accordion">$BODY$</div>


3) ПУ-->Управление дизайном-->Faq-->Вид материалов. Заменяем все на это:
Код
<section id="$ID$">
<h2><a href="#$ID$">$TITLE$</a></h2>
<div><?if($ANSWER$)?><p>$ANSWER$</p><?else?><i>Еще нет ответа на этот вопрос.</i><?endif?></div></section>


4)А в css, кидаем это:
Код

.accordion{
background-color:none;
border:none;
width: 600px; /*-Изменяем под свои размеры-*/
padding:0px;
margin: 50px auto;
}
.accordion section {
margin:5px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;  
}
.accordion h2, .accordion p{margin: 0;}
.accordion p{padding: 10px;}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans';
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a:hover {background: #fff;}
.accordion h2 + div {
height: 0;
overflow: hidden;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #666;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.accordion :target h2 + div {height: 100px;}
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://webelement.info
Категория: Скрипты uCoz | Просмотров: 2050 | Добавил: antisept | Рейтинг: 4.5/2 |
Теги: материалов, FAQ, вид, модуля, удобный, для
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]