CSS-гармошки широко используются для расширяемых и сворачиваемых меню, фрагментов, изображений, видео, часто задаваемых вопросов, списков и выдержек из статей. Вы можете легко создавать их с помощью HTML, CSS и JavaScript (или jQuery). Создание аккордеонов только для CSS - довольно сложная задача, но она очень полезна в средах с отключенным JavaScript.

В этом руководстве вы познакомитесь с пошаговым подходом к созданию аккордеона только для CSS.

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

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

FAQ 1



Lorem ipsum dolor, sit amet conctetur adipisicing elit. Ratione adipisci illum error, hic Expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!





instagram viewer







FAQ 2



Consequuntur earum pariatur dolorem repllat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architectureo voluptas labourum adipisci neque voluptates Concquatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem conquuntur molestiae ratione rerum vitae ab modi, минус placeat quis dignissimos. Dolorem quaerat odit, iusto Laboriosam Possimus, in Architecto aliquam Commodi sapiente saepe sequi и eligendi hic REPREHENDERIT REPELLENDUS Quos!

Укладка аккордеона

Вы можете стилизовать аккордеон, отрегулировав фоновый цвет, граница-радиус, прибыль, набивка, так далее.

тело {
 семейство шрифтов: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 максимальная ширина: 30 бэр;
 маржа: 1,5 бэр авто;
}
резюме {
 font-weight: 600;
 цвет: rgb (255, 255, 255);
 цвет фона: rgb (7, 185, 255);
 набивка: 1,2 бэр;
 нижнее поле: 1,2 бэр;
 радиус границы: 0,5 бэр;
 курсор: указатель;
}

Выход:

Единственное ограничение - вы не сможете контролировать каждую часть кода. Структура HTML может быть изменена, но вы не можете создать собственный аккордеон. Поэтому давайте создадим собственный раздел часто задаваемых вопросов, используя расширенный CSS.

Создайте свой собственный раздел часто задаваемых вопросов

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

Использование метода флажка

Метод флажка использует флажок как тип ввода. Каждый раз, когда пользователь выбирает вкладку, он устанавливает флажок, и он открывается. Вы можете открывать несколько вкладок одновременно, используя метод флажков, аналогично тому, как вы можете отметить более одного флажка внутри HTML-форма.

HTML

Пользовательский CSS Only Accordion (FAQ)

Использование метода флажка






Как создать собственный аккордеон, используя только CSS?


 Lorem ipsum dolor sit amet conctetur adipisicing elit. Harum debitis voluptas allux tenetur quas suscipit
 acceptnda a, nesciunt eum nobis eaque, excitationem distinctio alias ullam quia. Corrupti beatae
 needitatibus nihil.









Как изменить высоту псевдоэлементов?


 Temporibus vel dolore nam dolorem similique voluptatum. Аликвам, долор и т. Д.! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium de nemo Expedita esse eos libero incidunt
 репретендерит фэйсере экс хик ипса одит в! Eveniet.

Общий CSS

Примените базовый CSS к телу.

тело {
 цвет: # 502c2c;
 фон: # f1edec;
 набивка: 1,2 бэр;
 семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 максимальная ширина: 45 бэр;
 маржа: 0 авто;
 размер шрифта: 1,2 бэр;
}

Укладка аккордеона

Сначала скройте флажки, изменив ввод.

/ * Скрытие флажков или переключателей * /
Вход {
 позиция: абсолютная;
 непрозрачность: 0;
 z-индекс: -1;
}

Теперь нарисуйте аккордеон. Вы можете добавить::после псевдоэлемент для + подписать. Вы можете обратиться к Справочная таблица по персонажам и использовать любые Калькулятор преобразования сущностей чтобы найти значение CSS числового значения. Здесь значение CSS для + является \ 002B.

/ * Стили аккордеона * /
.часто задаваемые вопросы {
 цвет: # ffe3e3;
 нижнее поле: 3 бэр;
}
.faq-label {
 размер шрифта: 1,5 бэр;
 дисплей: гибкий;
 align-items: center;
 justify-content: пробел между;
 заполнение: 1em;
 фон: # b61818;
 font-weight: жирный;
 курсор: указатель;
 выбор пользователя: нет;
}
.faq-label:: after {
 содержимое: '\ 002B';
 набивка: 0,51 бэр;
 преобразовать: масштаб (1,8);
 выравнивание текста: центр;
 переход: все 0,35 с;
}
.faq-content {
 максимальная высота: 0;
 отступ: 0 1em;
 цвет: # 2c3e50;
 фон: белый;
 переход: все 0,35 с;
 дисплей: нет;
}

Теперь давайте добавим функциональности аккордеону, используя смежные селекторы и селекторы атрибутов. Здесь, \2013 значение CSS для –, числовое значение, представляющее –.

input: checked + .faq-label {
 фон: # 8f1414;
}
ввод: проверено + .faq-label:: after {
 содержание: '\ 2013';
 преобразовать: масштаб (1,5);
}
ввод: проверено ~ .faq-content {
 макс-высота: 100vh;
 заполнение: 1em;
 дисплей: блок;
 переход: все 0,35 с;
}

Выход:

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

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

HTML

Пользовательский CSS Only Accordion (FAQ)

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






Как создать аккордеон с помощью метода радио-кнопки?


 Lorem, ipsum dolor sit amet conctetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam needitatibus, nisi non adipisci temporibus correpti libero hic aspernatur quibusdam dolores perferendis, officiis odio Repllendus.









Как создать собственный аккордеон, используя только CSS?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur Possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Что означает стиль аккордеон?


 Laudantium quibusdam labouriosam hic omnis quas ullam Commodi rem. Architecto ut labourum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? Вель, нон!









Закрыть все ×

CSS

Скопируйте приведенный выше CSS метода флажка, поскольку оба метода отличаются только структурной точки зрения. Вы могли заметить, что все время открыта одна вкладка. Это происходит потому, что вы не можете снимать отметки с переключателей, например с флажков. Для этого добавьте приведенный ниже код CSS в переключатель «Закрыть все» без какого-либо описания.

/ * Закрытие всего * /
.faq-label {
 положение: относительное;
}
.faq-close {
 дисплей: встроенный блок;
 набивка: 1 бэр;
 размер шрифта: 1 бэр;
 фон: # b61818;
 курсор: указатель;
 позиция: абсолютная;
 слева: 64 бэр;
}

Выход:

Продолжайте экспериментировать и добавляйте анимации

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

Наинси Мурья (Опубликовано 16 статей)

Naincy специализируется на создании высокочувствительных веб-сайтов и эффективной контентной стратегии наряду с веб-копиями. Она - внештатный технический писатель, внимательно следящий за тенденциями в технологиях.

Ещё от Naincy Mourya