регистрация
856материалов
3290комментариев
235тем на форуме
6858пользователей

jQuery Accordion для uCoz


Описание:

Скитаясь по необъятным просторам интернета, нашел отличные аккордеон вкладки, как и любые другие они складывается и раскладывается по клику, показывая и скрывая ту или иную информацию о Вашем сайте или блоге, но мне понравился его оригинальный дизайн и в этой материале я хочу поделится своей находкой. Функционал реализован с помощью небольшого скрипта jQuery, который плавно открывает подразделы вкладок. Цветовая гамма подобрана отлично, но при необходимости ее легко можно сменить на индивидуальную.

Установка:

Для на чала пропишим стили аккордеона, в css вставляете код:
Код
.accordion-container{
           position: relative;
           width: 500px;
           height: auto;
           margin: 20px auto;
}
.accordion-container > h2{
           text-align: center;
           color: #fff;
           padding-bottom: 5px;
           margin-bottom: 30px;
           border-bottom: 1px solid #ddd;
}
.set{
           position: relative;
           width: 100%;
           height: auto;
           background-color: #f5f5f5;
}
.set > a{
           display: block;
           padding: 10px 15px;
           text-decoration: none;
           color: #555;
           font-weight: 600;
           border-bottom: 1px solid #ddd;
           -webkit-transition:all 0.2s linear;
           -moz-transition:all 0.2s linear;
           transition:all 0.2s linear;
}
.set > a i{
           position:relative;
           float: right;
           margin-top:4px;
           color: #666;
}
.set > a.active{
           background-color:#3399cc;
           color: #fff;
}
.set > a.active i{
           color: #fff;
}
.content-accordion{
           position:relative;
           width: 100%;
           height: auto;
           background-color: #fff;
           border-bottom: 1px solid #ddd;
           display:none;
}
.content-accordion p{
           padding: 10px 15px;
           margin: 0;
           color: #333;
}

Где хотите видеть аккордеон вкладки вставляете код:
Код
<div class="accordion-container">
           <div class="set">
           <a href="#">
           Первая вкадка
           <i class="fa fa-plus"></i>
           </a>
           <div class="content-accordion">
           <p>Содержимое 1 вкладки</p>
           </div>
           </div>
           <div class="set">
           <a href="#">
           Вторая вкладка
           <i class="fa fa-plus"></i>
           </a>
           <div class="content-accordion">
           <p>Содержимое 2 вкладки</p>
           </div>
           </div>
           <div class="set">
           <a href="#">
           Третья вкладка
           <i class="fa fa-plus"></i>
           </a>
           <div class="content-accordion">
           <p>Содержимое 3 вкладки</p>
           </div>
           </div>
           <div class="set">
           <a href="#">
           Четвертая вкладка
           <i class="fa fa-plus"></i>           
           </a>
           <div class="content-accordion">
           <p>Содержимое 4 вкладки</p>
           </div>
           </div>
</div>

Ну и перед закрывающим тегом </body> вставляете код:
Код
<script>$(document).ready(function(){
           $(".set > a").on("click", function(){
           if($(this).hasClass('active')){
           $(this).removeClass("active");
           $(this).siblings('.content-accordion').slideUp(200);
           $(".set > a i").removeClass("fa-minus").addClass("fa-plus");
           }else{
           $(".set > a i").removeClass("fa-minus").addClass("fa-plus");
           $(this).find("i").removeClass("fa-plus").addClass("fa-minus");
           $(".set > a").removeClass("active");
           $(this).addClass("active");
           $('.content-accordion').slideUp(200);
           $(this).siblings('.content-accordion').slideDown(200);
           }
                     
           });
});</script>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 18.09.2016 в 06:30
Материал просмотрен: 1494 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 10 комментариев

Пожаловаться
Сказать спасибо
Источник

10 комментариев


Михайл
Спасибо, очень классно сделан аккордеон
Ромчик
Всегда пожалуйста
a
Dmitriy Chumakov @apofest 19.03.2017 12:093
0
При добавлении аккордеона на сайт пропадает содержимое страниц сайта, как такое исправить?
Ромчик
Ссылку на сайт где возникает проблема
a
Dmitriy Chumakov @apofest 19.03.2017 14:465
0
http://www.cyber-mania.ru/ Заметил, что это происходит при добавлении css
Ромчик
Исправлено, переустановите полностью скрипт
a
Dmitriy Chumakov @apofest 19.03.2017 15:257
0
Спасибо, заработало!

http://www.cyber-mania.ru/tournaments/2017-02-10-17 и http://www.cyber-mania.ru/index/0-15

Почему иконки + - есть только на второй странице?
Ромчик
Я почему-то не вижу данный скрипт у Вас на странице
a
http://www.cyber-mania.ru/tournam....-10-17# - добавил информацию в четвертую вкладку и сразу пропали значки +- Как исправить?
m
Подскажите, а как сделать, что бы при раскрытии/закрытии списка страница не перескакивала на начало?
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0