jQuery Accordion для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

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{
          position:relative;
          width: 100%;
          height: auto;
          background-color: #fff;
          border-bottom: 1px solid #ddd;
          display:none;
}
.content 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">
          <p>Содержимое 1 вкладки</p>
          </div>
          </div>
          <div class="set">
          <a href="#">
          Вторая вкладка
          <i class="fa fa-plus"></i>
          </a>
          <div class="content">
          <p>Содержимое 2 вкладки</p>
          </div>
          </div>
          <div class="set">
          <a href="#">
          Третья вкладка
          <i class="fa fa-plus"></i>
          </a>
          <div class="content">
          <p>Содержимое 3 вкладки</p>
          </div>
          </div>
          <div class="set">
          <a href="#">
          Четвертая вкладка
          <i class="fa fa-plus"></i>          
          </a>
          <div class="content">
          <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').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').slideUp(200);
          $(this).siblings('.content').slideDown(200);
          }
                   
          });
});</script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

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

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

2 комментария


Михайл
Спасибо, очень классно сделан аккордеон
Ромчик
Всегда пожалуйста
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта