7 228 Скрипты / Tabs

Адаптивные вкладки на jQuery

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{} вкладки из горизонтальных преобразуются в вертикальный аккордион.

HTML

Разметка выполнена в виде неупорядоченного списка:

CSS

JS

Для работы скрипта нужно подключить jQuery библиотеку.

И подключить ниже следующий скрипт (либо прямо на странице, либо в ваш файл script.js):

    $(document).ready(function () {
        $('.accordion-tabs').children('li').first().children('a').addClass('is-active')
              .next().addClass('is-open').show();
        $('.accordion-tabs').on('click', 'li > a', function(event) {
            if (!$(this).hasClass('is-active')) {
                event.preventDefault();
                $('.accordion-tabs .is-open').removeClass('is-open').hide();
                $(this).next().toggleClass('is-open').toggle();
                $('.accordion-tabs').find('.is-active').removeClass('is-active');
                $(this).addClass('is-active');
            } else {
                event.preventDefault();
            }
        });
    });
Скачать 1955Загрузок 2,76 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи