что такое аккордеон на сайте
Аккордеон на CSS
Вариант создания аккордеона на чистом CSS
2 примера создания аккордеона без использования скриптов.
Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Еще описание вкладки
И еще описание вкладки
Обратите внимание, что ID для каждой вкладки должны быть уникальные:
Пример аккордеона с несколькими открытыми вкладками
Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки
Еще описание вкладки
И еще описание вкладки
CSS такой же, как в первом варианте
Смотрите также:
Анимированный Tab Bar
Нижняя панель вкладок с красивым анимированным переходом
Адаптивное мега-меню на jQuery
Очень простое, удобное и функциональное меню на jQuery
Навигационное меню для лендинга
Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции
Добавить комментарий:
Комментарии:
Дополнение: если текста больше чем на страницу.
bbobik………………, нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!
Та же проблема, что только не делал — скроллит в конец страницы, плюнул и сделал на jquery из другого примера
Простой аккордеон на JavaScript и CSS
Где стразу вид изменился, но это все только будет видно при открытии, что не стал вообще изменять, так как все корректно по цветовой палитре выстроено. Безусловно, если вы ходили по разным интернет ресурсам, то вам вероятно встречался такой стиль, что только изменяется по цветовой гамме на многих сайтах.
В основном веб мастер решает разместить и в дальнейшем использует в тех категориях, где часто задаются вопросов. Но в большинстве они предназначены для места, где содержится информация, где каждая статья или материал идет под ключевым словом. Ведь функционал довольно востребован, так как можете поместить описание или информацию в это поле.
Все проверено по функциям, также такой стиль с изменением идет:
Первое описание в категорий.
Адаптивное модальное окно
Табы в виде аккордеона на CSS
.asengou-vanuseb <
width: 75%;
max-width: 595px;
margin: 47px auto;
box-shadow: 0px 0px 5px 3px rgba(148, 148, 148, 0.41), 0px 0px 14px 5px rgba(0, 0, 0, 0);
border: 2px solid #dcdada;
border-radius: 3px;
>
button.kenodougou <
width: 100%;
background-color: #eae8e8;
border: none;
outline: none;
text-align: left;
padding: 17px 18px;
font-size: 18px;
color: #312e2e;
cursor: pointer;
transition: background-color 0.2s linear;
border: 1px solid #e0dcdc;
text-shadow: 0 2px 0 #fffcfc;
border-bottom: 1px solid #c3c3c3;
>
button.kenodougou:after <
content: ‘\f055’;
font-family: «fontawesome»;
font-size: 14px;
float: right;
button.kenodougou.is-open:after <
content: ‘\f056’;
>
button.kenodougou:hover, button.kenodougou.is-open <
background: linear-gradient(to top, #bfb7b5 20%, #eaeae3 50%, #dcd7cd 80%);
>
.vanusebo-videnod <
background-color: #ffffff;
border-left: 1px solid rgb(210, 209, 209);
border-right: 1px solid rgb(220, 209, 209);
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
border-bottom: 1px solid #aba3a3;
>
var kenodougous = document.getElementsByClassName(«kenodougou»);
for (var i = 0; i 2019-06-19 Загрузок: 3 Просмотров: 3273 Комментарий: (0)
Что такое аккордеон на сайте
Аккордеоны — это элементы, используемые для раскрытия и свертывания контента, где панели контента аккордеонов для представления информации в ограниченном пространстве, ведь такой формат наиболее часто используемые в FAQ, где у вас есть вопросы и ответы.
Временами я встречал страницы часто задаваемых вопросов по аккордеону, на которых можно было бы просто перечислить контент внизу страницы, не заставляя меня нажимать на каждый заголовок.
Аккордеоны предоставляют идеальный способ сделать так, чтобы тяжелые страницы выглядели менее. Мне нравится думать об аккордеонах как об инструментах управления контентом. Если у вас есть страница, которая разбитая на десятки абзацев, это ссылок, изображений или просто слишком много блоков контента, то здесь вы можете найти меню аккордеона.
Здесь мы выбрали несколько хороших примеров аккордеонов, которые вы можете скачать и использовать для своих проектов.
Давайте посмотрим на некоторые мощные примеры аккордеонов.
Что такое аккордеон на сайте
В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Бесплатка: PSD шабон Modus Versus
Вашему вниманию предлагаем PSD шаблон с множеством элементов.
Компонент Аккордеон Accordion
Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Горизонтальный выпадающий список аккордеон для раскрытия блоков с необходимой информацией внутри.
В созданном аккордеоне, при нажатии (клике) на заголовок элемента, каждый элемент может быть «развёрнут» или «раскрыт», что в свою очередь отобразит информационное содержание связанное с этим элементом.
Универсальный аккордеон может пригодиться:
Основы. Подключение
Содержимое блока 1. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Какой-то ответ.Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Очередной ответ. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Открытая вкладка
Делаем одну вкладку открытой по умолчанию
Ниже расположен простой пример аккордеона с открытой вкладой по умолчанию.
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент UIkit 3.
Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Множественное раскрытие
Несколько открытых позиций без сворачивания
Делаем несколько открытых позиций при нажатии на заголовок:
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Произвольный элемент
Раскрытие произвольного элемента
Например, чтобы показать третий элемент, необходимо установить active: 2 (индекс начинается с нуля).
Третий элемент открыт по умолчанию. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Третий элемент открыт по умолчанию. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
Открытый текст с содержанием. Крутой фреймворк UIkit. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.
Параметры для атрибута
При использовании компонента Accordion к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Моментальное открытие отзывчивого аккордеона без паузы. Разница отлично видна, если обратить внимание на соседний пример Аккордеон с длительным открытием.
Описание: Разница отлично чувствуется, если смотреть на соседний пример. Разница отлично видна, если сравнивать с соседним примером. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Пример с увеличенной продолжительностью движения, с длительным открытием содержимого при нажатии на заголовок. Значение продолжительности установлено: 900 миллисекунд. Разница хорошо заметна, если обратить внимание на соседний пример Аккордеон без анимации.
Описание внутри. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
По умолчанию вкладки аккордеона с содержимым можно закрыть все без исключения. В данном примере одна вкладка будет открыта всегда в любом случае.
Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
События
Следующие события будут инициированы для элементов компонента «Accordion»:
Методы
Для компонента «Accordion» доступны следующие методы: