Аккордеон вкладки (табы) на jQuery
В данном уроке поделюсь с вами как сделать Аккордеон вкладки (табы) на "jquery". Тут мы разберем несколько моментов, задействуем иконки font Awesome, покажу как делать у второй иконки анимированный поворот при нажатии на вкладку, немного все это разбавим flexbox и разберем простой способ создания выпадающего блока на jqueru .
Все это сделаем не спеша, поэтапно, с моими пояснениями по коду. Постараюсь донести до вас суть, что для чего нужно, что бы смогли доработать исходный код своими идеями и использовать текущий вариант для свих проектов.
Описываем каркас Аккордеон вкладок
Открываем свою среду разработки, в моем случае это PhpStorm . Создаем файл index.html в нем разворачиваю свою аббревиатуру с мета данными. Как делать такие аббревиатур я показывал в уроке «Быстрая верстка при помощи EMMET».
Для удобства дальнейшего использования всего кода, заменю класс обертки на main , который будет главным блоком всей структуры.
Прописываем заголовок, в котором при помощи тега strong оформим его часть другим цветом.
Под каждую вкладку создаем отдельный блок с названием panel и разместим в нем два блока. Первый блок с названием panel-heading , второй panel-collapse .
Первый блок panel-heading являться табом, в нем создаем заголовком в котором размещаем ссылку и иконку. Так вот, по нажатию на данный блок, будем отображать второй блок panel-collapse с текстовым содержанием. В нем сделаем обертку всего содержимого panel-body , и далее заполняем блок произвольным текстом. Этот блок будет появляться, и исчезать по нажатию на заголовок panel-heading .
Это мы сделали одну панель, по такому подобию путем копирования мы делаем остальные, но прежде чем их создавать предлагаю оформить текущие блоки, а затем путем копипаста сделаем остальные.
Описываем CSSСоздаем файл CSS и описываем в нем стили. В первую очередь опишем стандартный набор для оформления основного блока main .
В качестве шрифта задействую шрифт Roboto , для этого его подключаю в самом верху.
Делаем размер шрифта в 15 пик. цветом немного по светлее и строчный интервал зададим 1.4. Таким образом, мы задали текстовое оформление внутри нашего блока.
Если бы пришлось делать верстку страницы с нуля, а не отдельного взятого элемента как в данном случае в уроке, мы бы задавали стили для всех ссылок, заголовков с абзацев, а затем приступил к оформлению всего остального.
В данном случае оформляем конкретный элемент и желательно все стили описать для него, что бы вы могли полученный код легко исправить и интегрировать в свой проект.
Начинаем с ссылок, делаем жирность у них поменьше, убираем подчеркивание.
То есть, логика такая, что бы не дублировать стили на странице мы сразу их описываем для основного родите, а далее дочерние элементы их все унаследуют.
Для заголовка уберем жирность, сделаем его немного темнее основного текста, увеличим до 28 пик., делаем его заглавными буквами. Весь текст в теге strong выделим синим цветом.
Приступаем к оформлению блока panel-heading , сам блок выступает в качестве кликабельного таба и что бы отлавливать по нему клик, для этого мы используем в нем ссылку. Хотя это можно было сделать и бес ссылки, но с ней работать удобнее.
Давайте сразу оформим ее. Задаем ссылке темным фон, текст белым, а для того что бы она растянулась на всю область li делаем ее блочным элементом.
Далее задаем внутренние отступы по краям. Иконку в ссылке увеличим немного в размере, и так как иконки разные по ширине будут и текст заголовка из за этого может плавать. Зададим иконке ширину в 30 пик. Тем самым обеспечим ровное выравнивание заголовка от левого края.
Затем при помощи псевдоэлемента вставим еще одну иконку в конец панели, она будет являться индикатором развернутости и свернутости второго блока. Для этого ссылке добавим position: relative и при помощи псевдоэлемента after вставляем иконку.
Логика следующая, когда мы кликаем на панели, при помощи JS будем добавлять класс IN . Который сейчас опишем, но предварительно его добавим, что бы видеть изменения, которые будут происходить.
При помощи той же трансформации иконку повернем ее на 180 градусов, а цвет панели и текста изменим на другой. Для плавности изменения фона добавим для ссылки transition .
Первый блок мы предварительно оформили, теперь переходим к оформлению блока panel-collapse с текстовым содержанием.
Так как параграфа унаследовали основной стиль блока, переходим к оформлению заголовка пятого уровня. Сделаем его в 20 пик и уменьшим немного отступы сверху и снизу.
Ниже в блоке wrapper-ul присутствуют списки, я их специально обернул, что бы к ним применить display: flex . Для этого обращаемся к блоку и делаем его flex контейнером, а блоки UL в нем выравниваем горизонтально.
Зададим для них свои отступы и у списков уберем маркер, а в место них добавляем иконку.
Присвоим спискам LI position: relative , а при помощи псевдо элемента вставим иконку и позиционируем ее абсолютно блоку LI . Затем оформляем ссылки в блоке LI и у первого LI уберем иконку и делаем текст немного темнее и жирнее.
Для того что бы задать анимацию при наведения, изменим цвет при помощи псевдокласса :hover , иконку сместим немного левее при помощи трансформации и зададим ей цвет. Но, а для того что бы иконка перемещалась плавно присваиваем псевдоэлементу transition в пол секунды. Далее оформим ссылку под имитацию кнопки.
И остается последнее, когда панель не активна, то есть по ней не произведен клик, класса IN нет, иконка развернута и весь текст скрыт.
Для этого блоку panel-collapse присваиваем display: none, а далее напишем скрипт, который будет отображать, и добавлять класс для нашего блока.
Пишем JS script для АккордеонаОткрываем тег script и запускаем код, когда загрузится вся страница. Обращаемся к блоку с классом panel-heading , и при помощи метода click() запускаем следующую функцию. Обращаемся к текущему элементу, при помощи переключателя классов добавляем класс in . С помощью метода next() отбираем нижний блок, а метод slideToggle() помогает это все плавно скрыть или отобразить.
Буквально двумя строчками мы достигли такой анимации.
Затем продублируем несколько раз панели, которые будут идти ниже, и видим, что не хватает между ними отступов. Добавляем его для блока panel-heading в 5 пик. Далее развернем, видим что после кнопки тоже нужны отступы. Зададим их при помощи padding в 20 пик.
Далее продублируем панели и изменим у них внутри контент.
Сейчас панель работает на каждый клик, сворачивая и разворачивая. Давайте сделаем так, что бы, когда кликаем по неактивной панели, вторая панель если есть активная, автоматом сама сворачивалась. В тоже время когда кликаем на активную она также сворачивается. Для этого допишем скрипт.
Отбираем все не активные блоки с классом panel-heading и удаляем у них класс in , тем самым нижний блок плавно сворачиваем при помощи метода slideUp() .
Сейчас на данный момент ширина блока с табими растягивается на всю область экрана. Если хотите ее ограничить, задаете для блока main фиксированную ширину. Так же сделаем табы по наведению меняли цвет.
В принципе, таким простым способом можно создать анимированные вкладки, притом количество и содержимое их может разнообразить самостоятельно.
Иконки можно изменять, весь их перечень и как подключать к странице я показывал где это можно посмотреть. Самое главное если вам это интересно, пробуйте, внедряйте, надеюсь что урок был вам полезен.