Как сделать аккордеон css

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник

Аккордеон на CSS

Вариант создания аккордеона на чистом CSS

2 примера создания аккордеона без использования скриптов.

Один работает с использованием радиокнопок , а другой с флажками

Пример аккордеона с одной открытой вкладкой

Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже

Еще описание вкладки

И еще описание вкладки

Обратите внимание, что ID для каждой вкладки должны быть уникальные:

Пример аккордеона с несколькими открытыми вкладками

Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки

Еще описание вкладки

И еще описание вкладки

CSS такой же, как в первом варианте

Опубликовано: 20.10.2020 / Обновлено: 04.02.2021
Рубрики: Меню и аккордеоны
Метки: CSS
6061 просмотр

Смотрите также:

Многоуровневое вертикальное меню

Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик

Оформление хлебных крошек

5 вариантов оформления хлебных крошек

Адаптивное мега-меню на jQuery

Очень простое, удобное и функциональное меню на jQuery

Добавить комментарий:

Здравствуйте. Спасибо за знания. У меня вопрос, не совсем к вашему коду, но .. близко. У меня используется что-то типа аккордеона, где при открытии каждой вкладке происходит подгрузка содержимого именно этой вкладки. Тип содержимого вкладок одинаково, отличия лишь в конкретных данных числах, названиях и т.д. Проблема собственно в следующем — при открытии страницы с аккордеоном-вкладками открывается первая вкладка со своими данными, тут всё ок, но если открыть следующую вкладку то первые секунд 5-ть. (иногда дольше) то в новой вкладке отображается содержимое первой кладке. Потом происходит обновление содержимого кладки до актуального содержимого. Как бороться? Может как-то скрывать содержимое вкладки(ок) до окончательной загрузки содержимого или svg-шку загрузки показывать? Буду весьма признателен за ссылку на пример.

Без примера сложно что то сказать.
Видеть надо как это работает.

Вот кусок из функции loadedCatasi (в неё вытаскивается массив данных (по вкладкам) из бд)

Мне эта информация вообще ни о чем не говорит…
Напишите мне в ВК или телеграм, нужно на сайте видеть что и как работает.

ЗЫ: эту тему удалю завтра, т.к. она не имеет вообще ничего общего с темой заметки

На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.

Дополнение: если текста больше чем на страницу.

bbobik………………, нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!

Источник

Создаем аккордеон с использованием только CSS

В данном уроке мы разберемся, как создать такой популярный элемент дизайна веб страниц как аккордеон с использованием только HTML и CSS (будет добавлено немного CSS3 для организации перехода между слайдами). В итоге мы получим код для двух вариантов аккордеона — горизонтального и вертикального.

Горизонтальный аккордеон

Начнем с разметки для горизонтального аккордеона. Она не содержит ничего специфического, только обычный код HTML:

Мы используем простой неупорядоченный список, который содержит несколько элементов с классами. Все просто. А CSS код превращает разметку в то, что нам нужно:

Все достаточно просто и очевидно. Сначала мы определяем класс .accordion для элемента

, где задается ширина и скрытие выступающего за рамки элемента контента, а также некоторые другие правила для стилизации внешнего вида.

Затем мы смещаем пункты списка влево, задаем для них ширину 20% (100% ÷ 5 = 20%) и устанавливаем свойство overflow:hidden; , чтобы ничего не выступало за рамки элемента. Также устанавливается фиксированная высота, которая отлично подходит для размещения контента при разворачивании пункта списка.

Для динамического эффекта при разворачивании пункта списка мы устанавливаем время перехода 0.2 секунды и эффект плавного перехода.

Затем используются очень полезные селекторы :first- и :last-of-type для задания скругленных углов слева вверху и внизу для первого пункта списка и справа вверху и внизу для последнего пункта списка соответственно.

Затем мы устанавливаем отступ в 10 px для элемента

Теперь мы устанавливаем функционал аккордеона:

Данное правило утверждает следующее: как только курсор мыши окажется над элементом

, нужно сделать все элементы
шириной 10%

Таким образом, мы получим 5 × 10% = 50%. 5 слайдов шириной 10% в списке. То есть у нас есть 50% свободного пространства для того, чтобы заполнить его пунктом списка, над которым находится курсор мыши.

10% пункта списка + 50% свободного пространства = 60%

Теперь мы просто устанавливаем правило: пункт списка, над которым находится курсор мыши, надо сделать шириной 60%:

В целом функционал использует два правила и расшифровывается так: когда курсор мыши находится над списком, нужно установить ширину всех пунктов списка равной 10% ширины элемента

, но тот элемент

, над которым находится курсор мыши, надо сделать шириной 60%.

10% + 10% + 10% + 10% + 60% = 100%

Последний блок кода просто устанавливает цвета для наших слайдов.

Когда весь код соединяется вместе, мы получаем серию пунктов списка, которые изменяют свою ширину при наведении на них курсора мыши (но всегда общая ширина равна 100%). Мы используем немного CSS3 для создания скругленных углов и эффекта перехода в тех браузерах, которые поддерживают данные правила. Таким образом, мы получили аккордеон, который не использует JavaScript и работает даже в IE7.

Вертикальный аккордеон

Теперь разберемся с вертикальным аккордеоном. Для него мы будем использовать идентичную разметку HTML с единственным добавлением ID для элемента

:

Теперь мы пристыковываем пункты списка друг к другу по вертикали. Устанавливаем для них ширину 100% и используем логику 10% / 60% для задания высоты. Код CSS имеет следующий вид:

Мы явно устанавливаем ширину равной 100% в правиле для селектора :hover , но логика для расчета значений высоты не изменилась.

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: csswizardry.com/2011/02/pure-css3-accordion/
Перевел: Сергей Фастунов
Урок создан: 4 Марта 2011
Просмотров: 42182
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Как создать вертикальный аккордеон для сайта

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

создания HTML разметки;

описания его внешнего вида с помощью CSS;

написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

Вертикальное меню аккордеон

Пример настройки аккордеона в качестве вертикального меню.

Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.

CSS и JavaScript:

Многоуровневое вертикальное меню аккордеон

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

Источник

Как сделать аккордеон css

Содержимое в виде аккордеона на CSS

Посмотреть примерСкачать

HTML часть

CSS часть

Вывод