Js аккордеон: Как создать вертикальный аккордеон для сайта
Аккордеон из HTML-элементов details и summary
Вы можете использовать их для создания интерактивных компонентов разворачивания и сворачивания совсем без JavaScript. Они работают во всех современных браузерах. В маргинальных браузерах, например IE, содержимое отображается полностью, поэтому пользователь всегда может получить доступ к контенту.
<details>
<summary>Кликайте сюда</summary>
<p>Добрый день...</p>
</details>
Кликайте сюдаДобрый день…
Ещё их можно немного стилизовать с помощью CSS, например, изменить расположение и внешний вид стрелки.
У раскрытого элемента details
есть атрибут open
который можно использовать для применения CSS или подмены текста в summary
в разных состояниях конструкции. Этот атрибут можно использовать для раскрытого начального состояния.
Кликайте чтобы раскрыть<details open> <summary>Кликайте чтобы скрыть</summary> <p>По умолчанию это раскрыто...</p> </details>
По умолчанию это раскрыто…
Сборка аккордеона из HTML-элементов
details
и summary
Комбинацию HTML-элементов details
и summary
можно использовать для интерактивного компонента «accordion».
<details>
<summary>Посмотреть ещё</summary>
<p>Привет!</p>
</details>
<details>
<summary>Посмотреть ещё</summary>
<p>Привет!</p>
</details>
Посмотреть ещёПривет!
Посмотреть ещёПривет!
Часто в компоненте «accordion» допускается раскрытие только одного элемента со скрытием остальных. HTML-элементы details
и summary
так делать не умеют.
Они возвращают событие
toggle
при переключении и этим можно воспользоваться, добавив совсем немного javascript, так:See this code details-summary-accordion on x.xhtml.ru.
How to build a progressively enhanced accordion component with vanilla JS.
flextabs-js — npm
jQuery FlexTabs Plugin
2.0.0jQuery-плагин, для создания адаптивных вкладок (табы, аккордеон, спойлер)
- Два режима отображения: tabs, accordion + (accordion с одной вкладкой в качестве спойлера)
- Адаптивный режим. Трансформация табов в аккордеон и обратно (произвольно или при заданной ширине окна браузера)
- Гибкая система методов/событий для программного управления состояниями
- Пользовательская анимация при открытии/закрытии вкладок и смене режима
Демо: Стандартный вариант | Демо: Анимация | Документация
Пакетные менеджеры:
bower install --save flextabs-js
npm install --save flextabs-js
Подключение:
- Подключить скрипты и стили:
<link rel="stylesheet" href="dist/jquery.flextabs.min.css">
<link rel="stylesheet" href="dist/jquery.flextabs.theme-default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="dist/jquery.flextabs.min.js"></script>
- Инициализировать плагин на группе элементов:
$('[data-ft]').flexTabs({
});
- Применить в HTML:
<div data-ft>
<nav>
<a href="#tab-1" class="active">Вкладка #1</a>
<a href="#tab-2">Вкладка #2</a>
<a href="#tab-3">Вкладка #3</a>
</nav>
<div>
<div id="tab-1">Содержание вкладки #1</div>
<div id="tab-2">Содержание вкладки #2</div>
<div id="tab-3">Содержание вкладки #3</div>
</div>
</div>
Другие варианты разметки см. Документацию
Зависимости:
- jQuery (тестировался на версии 3.3.1)
Поддержка
Решение проблем/багов плагина, а также замечания и пожелания в соответствующей теме
По всем другим вопросам: wahawaher@gmail.com
Лицензия (MIT)
Copyright (c) 2018-2019 Sergey Kravchenko
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
Адаптивный анимированный аккордеон на CSS3
Cегодня я бы хотел рассказать как создать адаптивный анимированный аккордеон на CSS3,. Аккордеон имеет приятный интерфейс и требует минимум усилий в реализации. Такой аккордеон весьма полезен, когда нужно скрыть часть информации на сайте, при этом сэкономив место и мотивируя пользователя нажать на нужную информацию, кроме этого шаблон аккордеона будет полностью адаптивным, что упростит отображение на мобильных устройствах.
Если вы хотите воспользоваться готовыми решениями, тогда просмотрите предложения в нашем
Как создать адаптивный анимированный аккордеон на CSS3. Пошаговая инструкция.
Шаг 1. HTML
Как вы знаете, первого с чего мы начинаем это разметка, нам понадобиться контейнер, в котором будут содержаться классы заголовка, а также содержания при развертывании:
<dt> <a href=»#accordion1″ aria-expanded=»false» aria-controls=»accordion1″>Заголовок</a> </dt> <dd aria-hidden=»true»> <p>Содержание контейнера</p> </dd> |
В демонстрации мы использовали несколько блоков, разметку мы дублировали для добавлении новых блоков внутри нашего контейнера.
Шаг 2. CSS
Начнем по порядку, так как кроме анимации стили у нас будут выполнять всю работу. Добавляем немного обводки вокруг аккордена:
.accordion dl, .accordion-list { border: 1px solid #ddd; } .accordion dl:after, .accordion-list:after { content: «»; display: block; height: 1em; width: 100%; background-color: #2ba659; } |
Форматируем текст в середине аккордеона:
.accordion p { padding: 1em 2em 1em 2em; }
.accordion { position: relative; background-color: #eee; } |
Теперь необходимо задать параметры для контейнера, чтобы аккордеон был не на всю страницу:
.container { max-width: 960px; margin: 0 auto; padding: 2em 0 2em 0; } |
Стилизируем заголовки, также добавляя плюсики:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 24 25 26 | .accordionTitle, .accordion__Heading { background-color: #38cc70; text-align: center; font-weight: 700; padding: 2em; display: block; text-decoration: none; color: #fff; transition: background-color 0.5s ease-in-out; border-bottom: 1px solid #30bb64; } .accordionTitle:before, .accordion__Heading:before { content: «+»; font-size: 1.5em; line-height: 0.5em; float: left; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .accordionTitle:hover, .accordion__Heading:hover { background-color: #2ba659; } |
Нам необходимо, чтобы плюсики крутились при развертывании, делаем мы это следующим образом:
.accordionTitleActive, .accordionTitle.is-expanded { background-color: #2ba659; } .accordionTitleActive:before, .accordionTitle.is-expanded:before { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } |
У нас еще будут стили адаптива, полный их список можете просмотреть в исходниках к данному уроку.
Шаг 3. JS
Теперь нам необходимо добавить немного магии, именно js будет отвечать за красивое развертывания нашего аккордеона:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | (function(){ var d = document, accordionToggles = d.querySelectorAll(‘.js-accordionTrigger’), setAria, setAccordionAria, switchAccordion, touchSupported = (‘ontouchstart’ in window), pointerSupported = (‘pointerdown’ in window);
skipClickDelay = function(e){ e.preventDefault(); e.target.click(); }
setAriaAttr = function(el, ariaType, newProperty){ el.setAttribute(ariaType, newProperty); }; setAccordionAria = function(el1, el2, expanded){ switch(expanded) { case «true»: setAriaAttr(el1, ‘aria-expanded’, ‘true’); setAriaAttr(el2, ‘aria-hidden’, ‘false’); break; case «false»: setAriaAttr(el1, ‘aria-expanded’, ‘false’); setAriaAttr(el2, ‘aria-hidden’, ‘true’); break; default: break; } }; //функции switchAccordion = function(e) { console.log(«triggered»); e.preventDefault(); var thisAnswer = e.target.parentNode.nextElementSibling; var thisQuestion = e.target; if(thisAnswer.classList.contains(‘is-collapsed’)) { setAccordionAria(thisQuestion, thisAnswer, ‘true’); } else { setAccordionAria(thisQuestion, thisAnswer, ‘false’); } thisQuestion.classList.toggle(‘is-collapsed’); thisQuestion.classList.toggle(‘is-expanded’); thisAnswer.classList.toggle(‘is-collapsed’); thisAnswer.classList.toggle(‘is-expanded’);
thisAnswer.classList.toggle(‘animateIn’); }; for (var i=0,len=accordionToggles.length; i<len; i++) { if(touchSupported) { accordionToggles[i].addEventListener(‘touchstart’, skipClickDelay, false); } if(pointerSupported){ accordionToggles[i].addEventListener(‘pointerdown’, skipClickDelay, false); } accordionToggles[i].addEventListener(‘click’, switchAccordion, false); } })(); |
В результате вот такой замечательный аккордеон с адаптивом у нас получился. Попробуйте его у себя на сайте, и он послужит вам хорошим примером организации контента на сайте.
Вот и все. Готово!
Читайте также:
Как сделать элегантный аккордеон с JQUERY и CSS3
Сегодня мы будем создавать элегантный аккордеон для контента. Идея состоит в том, чтобы несколько вертикальных вкладок с контентом раздвигались в стороны при наведении на одну из них курсором мыши. Для улучшения внешнего вида аккордеона будут использованы некоторые свойства CSS3. Давайте приступим!
Вы можете нажать на ссылку под изображением для просмотра демо или же для скачивания исходных документов.
Демо Загрузить материалы
Начнем в первую очередь с разметки.
РАЗМЕТКА
HTML будет состоять из списка, где каждая вкладка аккордеона — это элемент списка. Внутри элемента списка будет заголовок, который исчезает при наведении. Кроме того будет элемент для фона с белым градиентом и блок для описания.
<ul> <li> <div>Heading</div> <div></div> <div> <h3>Heading</h3> <p>Some descriptive text</p> <a href="#">more ?</a> </div> </li> </ul>
Остальные элементы будут иметь классы bg2, bg3 и bg4. Неупорядоченный список получает класс и id, так как мы будет в дальнейшем обращаться к нему в JavaScript.
CSS
Стили для списка будут следующими:
ul.accordion{ list-style:none; position:absolute; right:80px; top:0px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; }
Все элементы списка будут иметь разное фоновое изображение и поэтому в первую очередь зададим общие свойства стиля для каждого элемента списка:
ul.accordion li{ float:right; width:115px; height:480px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.accordion li.bg1{ background-image:url(../images/1.jpg); } ul.accordion li.bg2{ background-image:url(../images/2.jpg); } ul.accordion li.bg3{ background-image:url(../images/3.jpg); } ul.accordion li.bg4{ background-image:url(../images/4.jpg); }
Отметим, что box shadow не будет работать в IE.
Начальная ширина каждого пункта будет 115 пикселей. В JavaScript это значение будет изменено при наведении до 480px.
Граница вокруг элемента должна быть применена только для одной стороны элемента, в противном случае у нас бы получалась двойная рамка между пунктами и одинарная рамка на внешних границах. Нужно определить класс для левой границы, который будем применять для последнего элемента списка (так как элементы плавают справа, поэтому применять стили будем в обратном порядке):
ul.accordion li.bleft{ border-left:2px solid #fff; }
Теперь необходимо придать хороший вид заголовку с белым полупрозрачным фоном для каждого элемента списка при «замкнутом» состоянии аккордеона:
ul.accordion li .heading{ background-color:#fff; padding:10px; margin-top:60px; opacity:0.9; text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:14px; color:#444; text-align:center; text-shadow:-1px -1px 1px #ccc; }
Блок, который содержит описание, будет выглядеть следующем образом:
ul.accordion li .description{ position:absolute; width:480px; height:175px; bottom:0px; left:0px; display:none; }
Сначала установим display:none, так как мы хотим, чтоб элемент появлялся только при наведении. Вот стили других элементов:
ul.accordion li .description h3{ text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:45px; color:#444; text-align:left; margin:0px 0px 15px 20px; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{ line-height:14px; margin:10px 22px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a{ position:absolute; bottom:5px; left:20px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; } ul.accordion li .description a:hover{ color:#333; text-decoration:underline; }
Стиль для градиента:
ul.accordion li .bgDescription{ background:transparent url(../images/bgDescription.png) repeat-x top left; height:340px; position:absolute; bottom:0px; left:0px; width:100%; display:none; }
JAVASCRIPT
Во-первых, мы включаем библиотеку jQuery перед закрытием тега body:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Теперь добавим функцию, которая заставляет список раздвинуться при наведении на него мыши. Это может быть достигнуто путем увеличение ширины в 480 пикселей. При этом верхний заголовок должен исчезать и его место занимает градиент (CSS класс «bgDescription») с описанием:
<script type="text/javascript"> $(function() { $('#accordion > li').hover( function () { var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } ); }); </script>
Первая функция внутри «$(‘#accordion > li’).hover» срабатывает при наведении на нее курсора. Вторая функция — когда курсор отводится в сторону. Добавим некоторые временные задержки, чтобы перевод осуществлялся плавно.
Это все! Надеемся, что урок был интересным и полезным!
Автор — MARY LOU.
Перевод — Дежурка.
Читайте также:
Тест: Знаете ли вы песни Владимира Высоцкого?
Этот тест покажет, насколько вы знаете песни Владимира Высоцкого. Пройти тест смогут лишь те, кто хорошо знает его творчество.
Удачи!
- Вопрос из
Назовите имя телефонистки, которую так просили «Девушка, милая, я прошу продлите!».
- Вопрос из
Сколько негодяев вздернули на рею из за золотых дублонов?
- Вопрос из
Что, по утверждению Высоцкого, может быть лучше гор?
- Вопрос из
Как звали напарника летчика в бою двух наших самолетов против восьми.
- Вопрос из
С кем сыграл герой песни Высоцкого восемь партий, в преферанс, в очко и на бильярде?
- Вопрос из
Где зажигают вечные огни и к этому огню приносят цветы?
- Вопрос из
Кто пляшет в такт, нехотя и плавно?
- Вопрос из
Какая надпись была на заколоченных лагерных воротах?
- Вопрос из
Что нашел студент-археолог Федя в городе Элиста?
- Вопрос из
Почему черти не смогут топить свои котлы?
- Вопрос из
Какую сумму заработал герой песни Высоцкого на речке Ваче?
- Вопрос из
Что не делали Борисов и Леонов, когда были отправлены в разведку?
- Вопрос из
В какой песне звучит фраза «мир вашему дому»?
- Вопрос из
Какое «преступление» по мнению Высоцкого совершают товарищи ученые?
- Вопрос из
В какую передачу писали письмо пациенты Канатчиковой дачи?
- Вопрос из
Что визжало чертом во время сильного шторма?
- Вопрос из
Что сделал скалолазка с героем песни Высоцкого?
- Вопрос из
Высоцкий не любил, когда забывало это слово.
- Вопрос из
Что делал Зинин приятель с завода шин?
- Вопрос из
Высоцкий хотел, чтобы после его смерти за него выпили:
- Вопрос из
Высоцкий пел о том как «аборигены съели Кука». Потом они, конечно, переживают… А что аборигены не делают?
- Вопрос из
«Ой! Вань! Смотри, какие клоуны!Рот — хоть завязочки пришей…» Сколько, по мнению Вани, нужно было ткани на майку для Зины?
- Вопрос из
Из какой песни эти слова: «Какие странные дела у нас в России лепятся!»
- Вопрос из
Каких животных воспел Владимир Высоцкий, называя их привередливыми?
- Вопрос из
Заполни пропуск: «Еще ни холодов, ни льдин.Земля тепла. _______ .А в землю лег еще одинна Новодевичьем мужчина.»
Поставьте свою оценку
Владимир Высоцкиймузыкамузыкантпевецсоветский музыкантсоветский певецсссртест
Вам могут быть интересны
Музыкальная школа «Jam Session», уроки вокала в Киеве (м.Нивки)
Талант — это не случайность, данная при рождении. В современном обществе очень многие полагают, что если человеку при рождении не досталось таланта, то с этим ничего не поделать. Эти люди просто сдаются на милость судьбы. Соответственно и живут они неполной жизнью, не познав ее подлинной радости. И это величайшая трагедия человечества. Мы рождаемся с природной способностью учиться. Взрослый человек, который ни к чему не стремится и ничего не хочет от жизни, просто неправильно воспитан. Все в ваших руках….
«….Для того чтобы семя проросло, нужны время и условия… А главное – желание!» Секрет любого успеха в тренировке способностей! Мы рождаемся только с небольшими физиологическими отличиями в той или иной мере, но то чего достигаем за жизнь – зависит только от нас!
Синити Судзуки
Добро пожаловать в наш захватывающий мир творчества!
Подробнее о нас:
Занятия в нашем центре проходят по таким направлениям: уроки вокала для детей и взрослых, уроки гитары, фортепиано, уроки игры на барабанах, хореография, актерское мастерство и битбокс. Мы работаем во всех возрастных категориях, а так же обучение доступно как для «новичков», так и для подготовленных учеников, желающих поднять свой профессиональный уровень. Занятия уроками вокала, хореографией и игрой на музыкальных инструментах проходят в дружной, теплой и творческой атмосфере, в прекрасном городе Киеве. Преподаватель обязательно найдет особую индивидуальную методику, подходящую именно Вам. Так же у нас в центре вы можете: записать песню в студии, заказать аранжировку или написание авторской песни, удаленные PR & Booking услуги. У нас проводиться много различных музыкальных мастер-классов, семинаров, концертов школы. Еще одна часть нашей музыкальной жизни – это творческий отдых. Походы в караоке или на природу с гитарой – неотъемлемая часть нашего совместного приятного времяпровождения! Творческий музыкальный центр «Jam-Session» имеет символическое название. «Джем сейшн» — это музыкальный термин с сольфеджио, описывающий совместную импровизацию для приятного времяпровождения. Музыкальные встречи, когда музыканты собираются и играют без подготовки. Иными словами – встречи музыкантов с импровизацией в качестве отдыха. У нас очень дружеская атмосфера и сплоченный коллектив! На досуге мы не только «джемим», по выходным, на природе, или после концертов… Но и на уроках вокала тоже не соскучишься! Не стандартная программа обучения – это наш конек! Мы вкладываем душу в наших учеников и верим в них! Талант — это всего лишь треттий уровень развития задатков. Так давайте развивать его вместе:) Терпение и труд все перетрут! Всегда будем рады видеть Вас в нашем центре!
аккордеон-js — npm
Легкий и доступный аккордеонный модуль с расширяемым API. С помощью модуля вы можете создать гармошку на своем веб-сайте, что особенно полезно для создания списков часто задаваемых вопросов.
Версия
3.1.1
Установка
npm
Установить пакет и импортировать файлы
npm установить accordion-js
импортный Аккордеон из 'accordion-js'; импортировать 'accordion-js / dist / accordion.min.css';
CDN
Включить файлы с помощью CDN.
https://unpkg.com/accordion-js@3.1.1/dist/accordion.min.css
https://unpkg.com/accordion-js@3.1.1/dist/accordion.min.js
Github
Вы также можете скачать файлы с Github и вручную прикрепить их к своему проекту.
Примечание: в производстве используйте файлы (JS и CSS) только из папки dist / .
Использование
Включить файлы
См. Раздел выше.
Создать HTML-макет
Это просто пример макета. Вы можете создать свою собственную HTML-структуру.
Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Инициализировать модуль
<сценарий> новый Аккордеон ('. аккордеон-контейнер');
API
Примеры
Аккордеон новый (контейнер, опции)
-
контейнер
— струна | HTMLElement (обязательно), селектор контейнера для гармошки -
варианты
— объект (по желанию), варианты гармошки
// Параметры по умолчанию новый Accordion ('.контейнер-первый '); // Параметры пользователя новый Accordion ('. container-second', { продолжительность: 400, showMultiple: правда, onOpen: function (currentElement) { console.log (currentElement); } }); // Определить несколько аккордеонов с одинаковыми параметрами (передать массив с селекторами) новый Accordion (['. контейнер-первый', '. контейнер-второй'], {}); // или передать массив с HTMLElements const accordions = Array.from (document.querySelectorAll ('. Accordion-container')); новый Accordion (аккордеоны, {}); // Отсоединить события const accordion = новый Accordion ('.контейнер-первый '); Accordion.detachEvents ();
Комплектация
Опция | Тип | Значение по умолчанию | Описание |
---|---|---|---|
продолжительность | номер | 600 | Продолжительность анимации в мс |
ariaEnabled | логическое | правда | Добавить элементы ARIA в структуру HTML |
коллапс | логическое | правда | Разрешить свертывание развернутой панели |
показать | логическое | ложь | Показывать несколько элементов одновременно |
openOnInit | массив | [] | Показать элементы аккордеона во время инициализации |
Элемент Класс | строка | ‘ac’ | Класс элемента |
триггер Класс | строка | ‘триггер переменного тока’ | Класс срабатывания |
панель Класс | строка | «ac-панель» | Класс панели |
активный класс | строка | активен | Класс активного элемента |
до открытия | функция | – | Вызов перед открытием позиции. beforeOpen: (currElement) => {} |
on Открыть | функция | – | Звонит, когда элемент открыт. onOpen: (currElement) => {} |
доЗакрыть | функция | – | Звонки перед закрытием позиции. beforeClose: (currElement) => {} |
закрыть | функция | – | Звонит, когда элемент закрыт. onClose: (currElement) => {} |
Методы
Опция | Описание | Аргументы |
---|---|---|
attachEvents () | Присоединить события | – |
detachEvents () | Отключить события | – |
открыть () | Откройте элемент аккордеона с заданным идентификатором Например, в соотв. Открыто (1) | idx — индекс элемента |
закрыть () | Закройте элемент аккордеона с заданным идентификатором E.грамм. в соотв. Закрыть (1) | idx — индекс элемента |
переключатель () | Переключить элемент аккордеона с заданным idx Например, соотв. Переключатель (1) | idx — индекс элемента |
открыть Все () | Открыть все элементы гармошки | – |
закрытьВсе () | Закрыть все элементы гармошки | – |
уничтожить () | Уничтожить экземпляр аккордеона: Открыть элементы, удалить события, идентификаторы и ARIA | – |
v3 Информация о выпуске
В API версии 3 внесено множество изменений.0.0
, поэтому, если вы используете предыдущие версии аккордеона ( 2.8.0
и ниже), я рекомендую обновить пакет до последней версии с новой структурой и параметрами.
10 лучших аккордеонных компонентов на чистом JavaScript и CSS (обновление 2021)
Вот постоянно обновляемый список из 10 лучших аккордеонных компонентов / виджетов на основе JavaScript и CSS для систем часто задаваемых вопросов и компонентов переключения контента. Надеюсь, вам это нравится, и вы не забываете распространять мир.
Первоначально опубликовано 20 ноября 2017 г., обновлено 7 апреля 2021 г.
1.Многоуровневое аккордеонное меню с простым HTML и CSS
Демо Скачать
Простой подход Html5 / CSS3 к созданию многоуровневого скользящего аккордеонного меню из вложенных списков HTML. Он использует хаки с флажками и метками для переключения иерархических меню и несколько свойств CSS3 для плавных эффектов скольжения.
2. Простой простой интерфейс «аккордеон»
Загрузить демо
Решение на чистом JavaScript / CSS, которое поможет вам создать вертикальный настраиваемый плавно скользящий интерфейс «аккордеон» из простой структуры HTML.
3. Адаптивный горизонтальный аккордеон на чистом CSS
Демо Скачать
Адаптивный горизонтальный аккордеон, созданный паромом, который использует переходы и преобразования CSS3 для плавного развертывания элементов аккордеона при наведении курсора мыши.
4. Создание вложенного интерфейса аккордеона и переключения содержимого с помощью JavaScript — handy-collapse.js
Demo Download
Небольшой ванильный плагин JavaScript, используемый для создания вложенных интерфейсов аккордеона и / или переключения содержимого с плавным скольжением вверх / вниз эффекты.
5. Отзывчивый компонент «Аккордеон и вкладки» только CSS
Демо Скачать
Еще одна вкладка на чистом CSS, которая будет автоматически преобразована в вертикальный интерфейс «аккордеон» на мобильных устройствах. На основе CSS flexbox и радио / меток.
6. Ползунок аккордеона с горизонтальным отзывчивым изображением на чистом CSS
Загрузить демо
Адаптивный слайдер аккордеона на чистом CSS / CSS3, который позволяет увеличивать изображение по горизонтали при наведении курсора мыши.На маленьких экранах, таких как мобильные устройства, слайдер-гармошка будет преобразован в вертикальный список изображений, чтобы соответствовать его родительскому контейнеру.
7. Гладкий аккордеон с элементом раскрытия деталей
Демо Скачать
Создайте плавно складывающийся аккордеон, используя JavaScript, анимацию CSS3 и элементы
.
8. Вертикальный аккордеон на основе Flexbox с чистым CSS
Демо Скачать
Плавный, отзывчивый, вертикальный пользовательский интерфейс аккордеона, расширяющий текущую панель аккордеона при наведении курсора мыши, построенный с использованием чистого CSS и модели Flexbox.
9. Необычный слайдер-гармошка с чистым CSS
Демо Скачать
Ползунок-гармошка на чистом CSS / CSS3, с помощью которого вы можете развернуть нужный слайдер до полного размера при наведении курсора мыши или касании. Адаптивный макет на основе модели Flexbox CSS3. В настоящее время поставляется с 5 причудливыми эффектами перехода.
10. Адаптивные вкладки / аккордеон в ванильном JavaScript
Демо Загрузить
Встроенный плагин JavaScript для создания удобных для мобильных устройств горизонтальных или вертикальных вкладок из неупорядоченных списков HTML.
Дополнительные ресурсы:
Чтобы найти больше библиотек JavaScript и / или CSS для создания интерфейсов «аккордеон» в веб-приложении, не забудьте ознакомиться с другими замечательными ресурсами:
Свернуть · Bootstrap
Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.
Пример
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
-
.свернуть
скрывает содержимое -
.collapsing
применяется во время переходов -
.collapse.show
показывает содержимое
Вы можете использовать ссылку с атрибутом href
или кнопку с атрибутом data-target
. В обоих случаях требуется data-toggle = "collapse"
.
Ссылка на href
Кнопка с целью данных
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Несколько целей
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Пример аккордеона
Используя компонент карты, вы можете расширить стандартное поведение сворачивания для создания аккордеона.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Доступность
Не забудьте добавить aria-extended
к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false"
. Если вы настроили открывать складной элемент по умолчанию с использованием класса show
, вместо этого установите для элемента управления aria-extended = "true"
.Плагин автоматически переключает этот атрибут на элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же элементу collapsbile). Если элемент HTML элемента управления не является кнопкой (например,
или
), к элементу следует добавить атрибут role = "button"
. Если ваш элемент управления нацелен на единственный складной элемент — i.е. атрибут data-target
указывает на селектор id
— вы должны добавить атрибут aria-controls
к элементу управления, содержащий id
сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.
Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 паттерн аккордеона — вам нужно будет включить его самостоятельно в собственный JavaScript.
Использование
Плагин коллапса использует несколько классов для работы с тяжелыми грузами:
-
.collapse
скрывает содержимое -
.collapse.show
показывает содержимое -
.collapsing
добавляется при запуске перехода и удаляется после его завершения
Эти классы можно найти в _transitions.scss
.
Через атрибуты данных
Просто добавьте data-toggle = "collapse"
и data-target
к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target
принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse
. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show
.
Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-parent = "# selector"
.Обратитесь к демонстрации, чтобы увидеть это в действии.
Через JavaScript
Включить вручную с помощью:
$ ('. Collapse'). Collapse ()
Параметры
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-
, как в data-parent = ""
.
Селектор Имя Тип По умолчанию Описание родитель | объект jQuery | Элемент DOM ложь Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента.(аналогично традиционному поведению аккордеона — это зависит от карты класса
). Атрибут должен быть установлен в целевой складной области. переключатель логическое правда Переключает сворачиваемый элемент при вызове
Методы
Асинхронные методы и переходы
Все методы API асинхронные и запускают переход .Они возвращаются к вызывающему, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .
См. Нашу документацию по JavaScript для получения дополнительной информации.
. Свернуть (опции)
Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры объект
.
$ ('# myCollapsible'). Collapse ({
toggle: false
})
.свернуть ('переключить')
Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse
или hidden.bs.collapse
).
.collapse ('показать')
Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до показа .bs.collapse
происходит событие).
.collapse ('скрыть')
Скрывает складной элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (то есть до того, как произойдет событие hidden.bs.collapse
).
.collapse ('утилизировать')
Разрушает обрушение элемента.
События
Класс collapse Bootstrap предоставляет несколько событий для подключения к функциональности свертывания.
Тип события Описание show.bs.collapse Это событие возникает сразу после вызова метода экземпляра show
. показано.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (ожидает завершения переходов CSS). hide.bs.collapse Это событие запускается сразу после вызова метода hide
. hidden.bs.collapse Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
$ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
// сделай что-нибудь…
})
Я видел, как некоторые люди сражались с аккордеонами в прошлом, и, ну, это было некрасиво. НО … Это вполне понятно! В аккордеоне много чего происходит, и на первый взгляд кажется, что все функции будут довольно сложно развить.
Что ж … Я здесь, чтобы доказать, что это неправильно, и я хочу помочь вам создать ваш самый лучший аккордеон на JavaScript 😄 И в этом уроке вы узнаете много чего, например:
- выбор элементов на DOM
- для каждой петли
- слушателей событий
- переключение списков классов
Если вас действительно интересует только код, вот ссылка на CodePen с ним. У меня также есть видео на YouTube, если вы больше визуальный человек 👇
Итак, разобравшись со всем этим, давайте начнем этот пост 😎
Начиная с HTML
Мы начнем с создания базовой структуры HTML.И здесь все довольно просто. Вам понадобится обертка
, которая будет удерживать ваш аккордеонный компонент , а внутри у вас будут разные элементы аккордеона . Внутри каждого элемента вы захотите иметь две вещи:- контент, который всегда будет отображаться (это может быть просто
или весь
) - a
, у которого будет контент, который будет свернут (он же появляется и исчезает, когда вы нажимаете 1 ).
A сделал изображение, чтобы проиллюстрировать базовую структуру, и я советую вам, особенно когда вы начинаете, набросать то, что вы собираетесь построить, поскольку это упрощает разделение всего на более мелкие части, чтобы вы могли работать с ними раздельно.
Итак, теперь, когда у нас есть структура, мы можем ее построить. В моем примере ниже, как вы можете видеть, у меня есть упомянутый
, в котором все есть внутри, и это наш аккордеонный компонент , и внутри каждого у меня есть accordionTitle
, который представляет контент, который всегда будет отображаться, и accordionContent
— контент, который будет появляться и исчезать.Вы можете изменить используемые HTML-элементы (возможно, вы предпочтете использовать
и
), но это ваша ответственность! И это наш HTML 🎉 <тело>
Аккордеон
Вкладка 1
Информация здесь
Вкладка 2
Информация здесь
Вкладка 3
Информация здесь
Шаг вперед с нашим CSS
У нас есть HTML, и это здорово, но это не аккордеон.Мы должны как минимум скрыть accordionContent
, чтобы хотя бы сделать его похожим на один, так что мы и собираемся сделать. Мы просто хотим скрыть это содержимое на этом этапе, поэтому мы собираемся добавить в наш CSS следующее.
кузов {
маржа слева: авто;
маржа-право: авто;
максимальная ширина: 40em;
}
.accordionTitle {
курсор: указатель;
-moz-user-select: нет;
-webkit-user-select: нет;
-ms-user-select: нет;
выбор пользователя: нет;
}
.accordionTitle + .accordionContent {
дисплей: нет;
}
Моделирование кузова
и .AccordionTitle
это просто вопрос предпочтения. Я заметил, что при нажатии на .accordionTitle
я получал выделенный текст, и я этого не хотел, поэтому я решил удалить его с помощью user-select, и, поскольку я хотел, чтобы пользователь знал, что этот элемент доступен для щелчка, я изменил курсор, который появляется при наведении на него указателя. Вот и все.
Значение .accordionTitle + .accordionContent
, и, честно говоря, соседний комбинатор — это почти все, что вам здесь нужно.Он будет стилизовать ваш .accordionContent
на основе того, следует ли он сразу за .accordionTitle
и, что касается моей структуры аккордеона, это как раз то, что мне нужно.
На данный момент нам понадобится именно этот CSS. Мы внесем в него некоторые изменения, как только начнем работать над нашим JavaScript, но мы доберемся до него прямо сейчас!
Он жив … С JavaScript (и немного CSS)
Итак, мы скрыли наш контент, но теперь мы хотим отображать его, когда мы нажимаем на accordionTitle
(или, конечно, показывать его, если он отображается).Итак, мы хотим взять этот класс accordionTitle
и добавить к нему прослушиватель событий, в данном случае событие щелчка , и тогда некоторая магия закончится!
Итак, на нашем JavaScript мы возьмем все элементы на нашем HTMl, которые имеют этот .accordionTitle
, и сделаем это с помощью querySelectorAll ().
const accordionTitles = document.querySelectorAll (". AccordionTitle")
Этот фрагмент кода захватывает все элементы с этим именем класса и возвращает NodeList
. NodeList
— это объект, содержащий набор из узлов
, в данном случае это наши элементы, которые имеют .accordionTitle
, что означает наш
. Теперь, когда у нас есть элементы, нам нужно добавить к каждому из них событие щелчка, и для этого мы будем использовать цикл forEach.
Цикл forEach
позволяет нам пройти через каждый элемент массива (или, в данном случае, NodeList) и что-то с ним сделать.Он очень похож на .map ()
, но, в отличие от .map ()
, он ничего из него не вернет, потому что любой возврат
внутри forEach
будет отброшен. Я использую forEach
, потому что хочу использовать исходные данные из моего массива / nodeList и что-то делать с ними вместо их изменения.
Итак, сделаем примерно следующее.
accordionTitles.forEach (accordionTitle => {})
Теперь внутри этих скобок мы можем определить, что мы делаем с каждым элементом, нашим accordionTitle
, и мы знаем, что хотим, чтобы что-то происходило, когда мы нажимаем на них, поэтому мы добавим к ним eventListener
.
accordionTitles.forEach (accordionTitle => {
accordionTitle.addEventListener ("клик", () => {})
})
Здесь мы говорим, что когда мы нажимаем на accordionTitle
, что-то произойдет, и мы определим, что происходит внутри этих новых скобок.
Итак … Мы знаем, что теперь наш div
с содержимым скрыт, и мы хотим его показать, поэтому … как мы можем это сделать? Вот мой подход к этому:
В нашем CSS мы в настоящее время скрываем контент на основе нашего .Элемент accordionTitle
, и я хочу сохранить эту логику, чтобы показать его. Это означает, что я хочу каким-то образом изменить наш .accordionTitle
, чтобы он позволял нашему .accordionContent
иметь другой стиль (возврат к комбинатору смежного брата ).
В JavaScript мы изменим classList
нашего accordionTitle
, добавив (или удалив) новый класс с именем is-open
.
аккордеонforEach (accordionTitle => {
accordionTitle.addEventListener ("клик", () => {
accordionTitle.classList.toggle ("открыт")
})
})
Итак, как я здесь думаю?
Если я могу добавить класс в свой accordionTitle
, и я управляю этим содержимым аккордеона div
с тем же элементом в моем CSS, я могу добавить новое правило CSS, которое сообщает моему коду, что когда файл . AccordionTitle
также имеет класс is-open
, затем .AccordionContent
, который идет сразу после него, должен иметь display: block
и выглядит так.
.accordionTitle.is-open + .accordionContent {
дисплей: блок;
}
Итак, я еще раз управляю видимостью или присутствием .accordionContent
с помощью .accordionTitle
и , переключая новый класс на .accordionTitle
, я могу отображать и скрывать .accordionContent
как хочу.
И теперь это просто работает, если вы попробуете. И у вас есть полностью функционирующий аккордеон с очень небольшим количеством строк JavaScript, двумя классами в HTML и почти всего двумя правилами CSS. Разве это не потрясающе? 🤯
Пойдем еще дальше
В настоящее время наш код позволяет нам открывать и закрывать любую вкладку, но все остальные, которые могут быть открыты, остаются такими, и это не совсем идеальный аккордеон , так что давайте поработаем над этим, не так ли?
В настоящее время мы переключаем каждый элемент независимо, но это не то, что нам нужно.Мы хотим проверить, есть ли уже открытые элементы, и мы хотим удалить это свойство, поэтому я собираюсь сделать следующее:
Я начну с удаления нашего переключателя
и сначала хочу создать оператор if / else. На моем if
я хочу проверить, есть ли у accordionTitle
класс is-open
, и, если это так, я хочу его удалить. Мы сделаем следующее на нашем JavaScript
if (accordionTitle.classList.contains ("is-open")) {
AccordionTitle.classList.remove ("открыто")
}
Теперь мой else
будет отвечать за добавление класса is-open
, и мы можем сделать это вот так
else {
accordionTitle.classList.add ("открыт");
}
На данный момент мы практически на том же уровне, что и с переключателем
. Теперь, в этом заявлении else
, я хочу увидеть, есть ли какие-либо другие элементы с классом .is-open
, и, если они есть, я хочу удалить его, и мы можем сделать это следующим образом.
Сначала мы выполняем querySelectorAll
для всех элементов с классом .is-open
, как это
const accordionTitlesWithIsOpen = document.querySelectorAll (". Is-open")
Затем нам нужно запустить новый цикл forEach
для перебора каждого элемента, чтобы мы могли удалить класс, и это выглядит примерно так
accordionTitlesWithIsOpen.forEach (accordionTitleWithIsOpen => {
AccordionTitleWithIsOpen.classList.remove ("открыто")
})
И готово! Теперь, как только вы нажмете на вкладку, другая закроется, и у нас будет полностью функционирующий аккордеон! 🎉🕺
Вот рабочий код 👇
Вот вам вызов
Я хотел бы попросить вас сделать что-нибудь прямо сейчас: используя то, что вы уже узнали, я хотел бы, чтобы вы создали кнопку, которая закрывала бы и открывала все вкладки. Готовы ли вы к этому вызову? Если да, пришлите мне свой код на мой Twitter 😄
И все!
Надеюсь, вы узнали все, что вам нужно знать о создании собственного JavaScript Accordion, и поняли, что сделать что-то потрясающее не так уж и сложно 💪
Дайте мне знать, что вы думаете об этом посте, и не стесняйтесь подписываться на меня в Twitter 🤘
Accordion Example | Авторские методы WAI-ARIA 1.1
Пример аккордеона | Практика создания WAI-ARIA 1.1 Приведенный ниже пример раздела содержит простую форму ввода личной информации, разделенную на 3 раздела.
это демонстрирует
шаблон дизайна для аккордеона.
В этой реализации одна панель аккордеона всегда расширяется, и только одна панель может
расширяться за раз.
Пример
Персональные данные
Платежный адрес
адреса доставки
Специальные возможности
Визуальный дизайн включает функции, призванные помочь пользователям понять, что аккордеон обеспечивает расширенные функции навигации с помощью клавиатуры.Когда кнопка заголовка аккордеона имеет фокус клавиатуры, стиль контейнера аккордеона и всех его кнопок заголовка изменяется.
Когда любая кнопка заголовка аккордеона получает фокус:
- Рамка, охватывающая всю гармошку, меняет цвет.
- Цвет фона кнопок заголовка аккордеона изменяется.
Кнопка заголовка аккордеона в фокусе:
- Имеет рамку, охватывающую как текст заголовка, так и значок.
- Имеет цвет фона, который отличает его от других кнопок-гармошек, которые не сфокусированы.
Поддержка клавиатуры
Ключ Функция Пробел или Введите Когда фокус находится на заголовке «гармошкой» свернутого раздела, этот раздел разворачивается. Вкладка - Перемещает фокус на следующий фокусируемый элемент.
- Все фокусируемые элементы в аккордеоне включены в последовательность страниц Вкладка .
Shift + Tab - Перемещает фокус на предыдущий фокусируемый элемент.
- Все фокусируемые элементы в аккордеоне включены в последовательность страниц Вкладка .
Стрелка вниз - Когда фокус находится на заголовке аккордеона, перемещает фокус на следующий заголовок аккордеона.
- Когда фокус находится на последнем заголовке аккордеона, перемещает фокус на первый заголовок аккордеона.
Стрелка вверх - Когда фокус находится на заголовке аккордеона, перемещает фокус на предыдущий заголовок аккордеона.
- Когда фокус находится на первом заголовке аккордеона, перемещает фокус на последний заголовок аккордеона.
Дом Когда фокус находится на заголовке аккордеона, перемещает фокус на первый заголовок аккордеона. Конец Когда фокус находится на заголовке аккордеона, перемещает фокус на последний заголовок аккордеона.
Атрибуты роли, свойства, состояния и табиндекса
Роль Атрибут Элемент Использование ч4
- Элемент, который служит заголовком гармошки.
- Каждый элемент заголовка «гармошка» содержит кнопку, которая управляет видимостью его панели содержимого.
- В этом примере используется заголовок уровня 3, поэтому он правильно помещается в контуре страницы; пример содержится в разделе с заголовком уровня 2.
aria-extended = "true"
кнопка
Установите значение true
при раскрытии панели «Гармошка», в противном случае установите значение false
. aria-controls = "ID"
кнопка
Указывает на идентификатор панели, которой управляет заголовок. aria-disabled = "true"
кнопка
Если панель «гармошка» развернута и не может быть свернута, установите значение true
. регион
дел
Создает область ориентира, содержащую развернутую в данный момент панель аккордеона. aria-labelledby = "IDREF"
дел
- Определяет доступное имя для элемента
области
. - Ссылается на кнопку заголовка гармошки, которая разворачивает и сворачивает область.
Область- ,
, элементы
должны иметь доступное имя, чтобы их можно было идентифицировать как ориентир.
Исходный код JavaScript и CSS
Исходный код HTML
Шаблон дизайна аккордеона в авторской практике WAI-ARIA 1.1 Accordion с Bootstrap 3 и без JS
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS. Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS. .заголовок панели .accordion-toggle: после {
/ * символ «открывающихся» панелей * /
семейство шрифтов: ‘Glyphicons Halflings’; / * необходимо для включения глификона * /
содержание: «\ e114»; / * при необходимости отрегулируйте, взято из bootstrap.css * /
float: right; / * при необходимости отрегулируйте * /
цвет: серый; / * при необходимости отрегулируйте * /
}
.panel-heading .accordion-toggle.collapsed: after {
/ * символ для «свернутых» панелей * /
содержание: «\ e080»; / * при необходимости отрегулируйте, взятое из начальной загрузки.css * /
}
Пример складного аккордеона Javascript | Мобискролл
Используйте складные элементы и гармошку, чтобы создавать индивидуальные панели, группы и карточки, которые можно складывать одну за другой или поочередно закрывать и открывать. Используйте его для сегментирования длинных форм и контента или для постепенного раскрытия информации.
Разборные и аккордеонные демонстрации доступны для других фреймворков.
Просмотр демонстраций и кода для
Просмотрите различные компоненты и демонстрации
Закрывать Демонстрация складной панели Javascript. Используйте его для сегментирования длинных форм, делая группы полей расширяемыми / сворачиваемыми. Обычный JS api для использования повсюду.
Демонстрация Javascript Accordion с одной открытой / расширенной панелью. Используйте это, чтобы пользователи могли сосредоточиться на одном фрагменте контента за раз. Обычный JS api для использования повсюду.
Пример складных карточек Javascript.Используйте его, чтобы показать / скрыть содержимое карты. Развернуть и свернуть при щелчке по заголовку карточки. Обычный JS api для использования повсюду.
Ищете что-то, чего не видели, или у вас есть вопрос о продаже?
Спросите нас об этом, мы здесь, чтобы помочь.
Спросите нас о чем угодно Настройте и попробуйте демонстрации локально
Войдите или начните пользоваться бесплатной пробной версией
Какой фреймворк вы используете?
Javascript
jQuery
AngularJS
Угловой
Реагировать
Другое
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Настройте и попробуйте демонстрации локально
Как бы вы хотели это сделать?
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Спасибо за скачивание
Попробуйте и настройте приложение локально
Распакуйте zip-файл и запустите проект, как любое приложение Ionic.Убедитесь, что у вас установлен Ionic CLI, и откройте терминал в корневой папке приложения.
Шаг 1. Запускаем в корневой папке $ npm установить
Шаг 2. Запустите приложение. $ ионная подача
Сообщите нам, если мы сможем помочь и получить удовольствие!
Спасибо за скачивание
Настроить демонстрации локально
Все настроено так, что вы можете сразу окунуться и приступить к исследованию.
Извлеките zip-файл и просто откройте демонстрационные версии в своем любимом браузере.
Инструкции по установке Mobiscroll в свой проект
следуйте этому руководству.
Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Спасибо за скачивание
Настроить демонстрации локально
Извлеките zip-файл и запустите проект, как любое приложение Angular CLI.Убедитесь, что у вас установлен Angular CLI.
Для установки и использования распакуйте zip-файл, откройте окно терминала и выполните следующие действия.
Шаг 1. Запускаем в корневой папке $ npm установить
Шаг 2. Запустите приложение. $ нг порция - открыть
Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Спасибо за скачивание
Настроить демонстрации локально
Все настроено так, что вы можете сразу окунуться и приступить к исследованию.
Мы настроили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.
Самый простой способ начать — следовать инструкциям по установке и
получение кода прямо с демонстрационной страницы. Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
В zip-файле вы найдете полнофункциональное приложение Kitchen-Wink Ionic.
Спасибо за скачивание
Настроить демонстрации локально
В демонстрациях используется встроенный в браузер Babel преобразователь ES6 и JSX.
Извлеките zip-файл и откройте демонстрационные версии в своем браузере.
Инструкции по установке Mobiscroll в вашем проекте.
следуйте этому руководству.
Сообщите нам, если мы можем помочь и получить удовольствие!
Настройте и попробуйте эту демонстрацию локально
Войдите или начните пользоваться бесплатной пробной версией
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Ваш пароль изменен!
.
.свернуть
скрывает содержимое .collapsing
применяется во время переходов .collapse.show
показывает содержимое href
или кнопку с атрибутом data-target
. В обоих случаях требуется data-toggle = "collapse"
.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.
aria-extended
к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false"
. Если вы настроили открывать складной элемент по умолчанию с использованием класса show
, вместо этого установите для элемента управления aria-extended = "true"
.Плагин автоматически переключает этот атрибут на элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же элементу collapsbile). Если элемент HTML элемента управления не является кнопкой (например,
или
), к элементу следует добавить атрибут role = "button"
. Если ваш элемент управления нацелен на единственный складной элемент — i.е. атрибут data-target
указывает на селектор id
— вы должны добавить атрибут aria-controls
к элементу управления, содержащий id
сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.
Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 паттерн аккордеона — вам нужно будет включить его самостоятельно в собственный JavaScript.
Использование
Плагин коллапса использует несколько классов для работы с тяжелыми грузами:
-
.collapse
скрывает содержимое -
.collapse.show
показывает содержимое -
.collapsing
добавляется при запуске перехода и удаляется после его завершения
Эти классы можно найти в _transitions.scss
.
Через атрибуты данных
Просто добавьте data-toggle = "collapse"
и data-target
к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target
принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse
. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show
.
Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-parent = "# selector"
.Обратитесь к демонстрации, чтобы увидеть это в действии.
Через JavaScript
Включить вручную с помощью:
$ ('. Collapse'). Collapse ()
Параметры
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-
, как в data-parent = ""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
родитель | | объект jQuery | Элемент DOM | ложь | Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента.(аналогично традиционному поведению аккордеона — это зависит от карты класса ). Атрибут должен быть установлен в целевой складной области. |
переключатель | логическое | правда | Переключает сворачиваемый элемент при вызове |
Методы
Асинхронные методы и переходы
Все методы API асинхронные и запускают переход .Они возвращаются к вызывающему, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .
См. Нашу документацию по JavaScript для получения дополнительной информации.
. Свернуть (опции)
Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры объект
.
$ ('# myCollapsible'). Collapse ({
toggle: false
})
.свернуть ('переключить')
Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse
или hidden.bs.collapse
).
.collapse ('показать')
Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до показа .bs.collapse
происходит событие).
.collapse ('скрыть')
Скрывает складной элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (то есть до того, как произойдет событие hidden.bs.collapse
).
.collapse ('утилизировать')
Разрушает обрушение элемента.
События
Класс collapseBootstrap предоставляет несколько событий для подключения к функциональности свертывания.
Тип события | Описание |
---|---|
show.bs.collapse | Это событие возникает сразу после вызова метода экземпляра show . |
показано.bs.collapse | Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (ожидает завершения переходов CSS). |
hide.bs.collapse | Это событие запускается сразу после вызова метода hide . |
hidden.bs.collapse | Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS). |
$ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
// сделай что-нибудь…
})
Я видел, как некоторые люди сражались с аккордеонами в прошлом, и, ну, это было некрасиво. НО … Это вполне понятно! В аккордеоне много чего происходит, и на первый взгляд кажется, что все функции будут довольно сложно развить.
Что ж … Я здесь, чтобы доказать, что это неправильно, и я хочу помочь вам создать ваш самый лучший аккордеон на JavaScript 😄 И в этом уроке вы узнаете много чего, например:
- выбор элементов на DOM
- для каждой петли
- слушателей событий
- переключение списков классов
Если вас действительно интересует только код, вот ссылка на CodePen с ним. У меня также есть видео на YouTube, если вы больше визуальный человек 👇
Итак, разобравшись со всем этим, давайте начнем этот пост 😎
Начиная с HTML
Мы начнем с создания базовой структуры HTML.И здесь все довольно просто. Вам понадобится обертка
, которая будет удерживать ваш аккордеонный компонент , а внутри у вас будут разные элементы аккордеона . Внутри каждого элемента вы захотите иметь две вещи:- контент, который всегда будет отображаться (это может быть просто
- a
A сделал изображение, чтобы проиллюстрировать базовую структуру, и я советую вам, особенно когда вы начинаете, набросать то, что вы собираетесь построить, поскольку это упрощает разделение всего на более мелкие части, чтобы вы могли работать с ними раздельно.
Итак, теперь, когда у нас есть структура, мы можем ее построить. В моем примере ниже, как вы можете видеть, у меня есть упомянутый
, в котором все есть внутри, и это наш аккордеонный компонент , и внутри каждого у меня есть accordionTitle
, который представляет контент, который всегда будет отображаться, и accordionContent
— контент, который будет появляться и исчезать.Вы можете изменить используемые HTML-элементы (возможно, вы предпочтете использовать
<тело>
Аккордеон
Вкладка 1
Информация здесь
Вкладка 2
Информация здесь
Вкладка 3
Информация здесь
Шаг вперед с нашим CSS
У нас есть HTML, и это здорово, но это не аккордеон.Мы должны как минимум скрыть
accordionContent
, чтобы хотя бы сделать его похожим на один, так что мы и собираемся сделать. Мы просто хотим скрыть это содержимое на этом этапе, поэтому мы собираемся добавить в наш CSS следующее.кузов { маржа слева: авто; маржа-право: авто; максимальная ширина: 40em; } .accordionTitle { курсор: указатель; -moz-user-select: нет; -webkit-user-select: нет; -ms-user-select: нет; выбор пользователя: нет; } .accordionTitle + .accordionContent { дисплей: нет; }
Моделирование кузова
.AccordionTitle
это просто вопрос предпочтения. Я заметил, что при нажатии на.accordionTitle
я получал выделенный текст, и я этого не хотел, поэтому я решил удалить его с помощью user-select, и, поскольку я хотел, чтобы пользователь знал, что этот элемент доступен для щелчка, я изменил курсор, который появляется при наведении на него указателя. Вот и все.Значение
.accordionTitle + .accordionContent
, и, честно говоря, соседний комбинатор — это почти все, что вам здесь нужно.Он будет стилизовать ваш.accordionContent
на основе того, следует ли он сразу за.accordionTitle
и, что касается моей структуры аккордеона, это как раз то, что мне нужно.На данный момент нам понадобится именно этот CSS. Мы внесем в него некоторые изменения, как только начнем работать над нашим JavaScript, но мы доберемся до него прямо сейчас!
Он жив … С JavaScript (и немного CSS)
Итак, мы скрыли наш контент, но теперь мы хотим отображать его, когда мы нажимаем на
accordionTitle
(или, конечно, показывать его, если он отображается).Итак, мы хотим взять этот классaccordionTitle
и добавить к нему прослушиватель событий, в данном случае событие щелчка , и тогда некоторая магия закончится!Итак, на нашем JavaScript мы возьмем все элементы на нашем HTMl, которые имеют этот
.accordionTitle
, и сделаем это с помощью querySelectorAll ().const accordionTitles = document.querySelectorAll (". AccordionTitle")
Этот фрагмент кода захватывает все элементы с этим именем класса и возвращает
NodeList
.NodeList
— это объект, содержащий набор изузлов
, в данном случае это наши элементы, которые имеют.accordionTitle
, что означает нашТеперь, когда у нас есть элементы, нам нужно добавить к каждому из них событие щелчка, и для этого мы будем использовать цикл forEach.
Цикл
forEach
позволяет нам пройти через каждый элемент массива (или, в данном случае, NodeList) и что-то с ним сделать.Он очень похож на.map ()
, но, в отличие от.map ()
, он ничего из него не вернет, потому что любойвозврат
внутриforEach
будет отброшен. Я используюforEach
, потому что хочу использовать исходные данные из моего массива / nodeList и что-то делать с ними вместо их изменения.Итак, сделаем примерно следующее.
accordionTitles.forEach (accordionTitle => {})
Теперь внутри этих скобок мы можем определить, что мы делаем с каждым элементом, нашим
accordionTitle
, и мы знаем, что хотим, чтобы что-то происходило, когда мы нажимаем на них, поэтому мы добавим к нимeventListener
.accordionTitles.forEach (accordionTitle => { accordionTitle.addEventListener ("клик", () => {}) })
Здесь мы говорим, что когда мы нажимаем на
accordionTitle
, что-то произойдет, и мы определим, что происходит внутри этих новых скобок.Итак … Мы знаем, что теперь наш
div
с содержимым скрыт, и мы хотим его показать, поэтому … как мы можем это сделать? Вот мой подход к этому:В нашем CSS мы в настоящее время скрываем контент на основе нашего
.Элемент accordionTitle
, и я хочу сохранить эту логику, чтобы показать его. Это означает, что я хочу каким-то образом изменить наш.accordionTitle
, чтобы он позволял нашему.accordionContent
иметь другой стиль (возврат к комбинатору смежного брата ).В JavaScript мы изменим
classList
нашегоaccordionTitle
, добавив (или удалив) новый класс с именемis-open
.аккордеонforEach (accordionTitle => { accordionTitle.addEventListener ("клик", () => { accordionTitle.classList.toggle ("открыт") }) })
Итак, как я здесь думаю? Если я могу добавить класс в свой
accordionTitle
, и я управляю этим содержимым аккордеонаdiv
с тем же элементом в моем CSS, я могу добавить новое правило CSS, которое сообщает моему коду, что когда файл. AccordionTitle
также имеет классis-open
, затем.AccordionContent
, который идет сразу после него, должен иметьdisplay: block
и выглядит так..accordionTitle.is-open + .accordionContent { дисплей: блок; }
Итак, я еще раз управляю видимостью или присутствием
.accordionContent
с помощью.accordionTitle
и , переключая новый класс на.accordionTitle
, я могу отображать и скрывать.accordionContent
как хочу.И теперь это просто работает, если вы попробуете. И у вас есть полностью функционирующий аккордеон с очень небольшим количеством строк JavaScript, двумя классами в HTML и почти всего двумя правилами CSS. Разве это не потрясающе? 🤯
Пойдем еще дальше
В настоящее время наш код позволяет нам открывать и закрывать любую вкладку, но все остальные, которые могут быть открыты, остаются такими, и это не совсем идеальный аккордеон , так что давайте поработаем над этим, не так ли? В настоящее время мы переключаем каждый элемент независимо, но это не то, что нам нужно.Мы хотим проверить, есть ли уже открытые элементы, и мы хотим удалить это свойство, поэтому я собираюсь сделать следующее:
Я начну с удаления нашего переключателя
if
я хочу проверить, есть ли уaccordionTitle
классis-open
, и, если это так, я хочу его удалить. Мы сделаем следующее на нашем JavaScriptif (accordionTitle.classList.contains ("is-open")) { AccordionTitle.classList.remove ("открыто") }
Теперь мой
else
будет отвечать за добавление классаis-open
, и мы можем сделать это вот такelse { accordionTitle.classList.add ("открыт"); }
На данный момент мы практически на том же уровне, что и с переключателем
else
, я хочу увидеть, есть ли какие-либо другие элементы с классом.is-open
, и, если они есть, я хочу удалить его, и мы можем сделать это следующим образом.Сначала мы выполняем
querySelectorAll
для всех элементов с классом.is-open
, как этоconst accordionTitlesWithIsOpen = document.querySelectorAll (". Is-open")
Затем нам нужно запустить новый цикл
forEach
для перебора каждого элемента, чтобы мы могли удалить класс, и это выглядит примерно такaccordionTitlesWithIsOpen.forEach (accordionTitleWithIsOpen => { AccordionTitleWithIsOpen.classList.remove ("открыто") })
И готово! Теперь, как только вы нажмете на вкладку, другая закроется, и у нас будет полностью функционирующий аккордеон! 🎉🕺 Вот рабочий код 👇
Вот вам вызов
Я хотел бы попросить вас сделать что-нибудь прямо сейчас: используя то, что вы уже узнали, я хотел бы, чтобы вы создали кнопку, которая закрывала бы и открывала все вкладки. Готовы ли вы к этому вызову? Если да, пришлите мне свой код на мой Twitter 😄
И все!
Надеюсь, вы узнали все, что вам нужно знать о создании собственного JavaScript Accordion, и поняли, что сделать что-то потрясающее не так уж и сложно 💪 Дайте мне знать, что вы думаете об этом посте, и не стесняйтесь подписываться на меня в Twitter 🤘
Accordion Example | Авторские методы WAI-ARIA 1.1
Пример аккордеона | Практика создания WAI-ARIA 1.1Приведенный ниже пример раздела содержит простую форму ввода личной информации, разделенную на 3 раздела. это демонстрирует шаблон дизайна для аккордеона. В этой реализации одна панель аккордеона всегда расширяется, и только одна панель может расширяться за раз.
Пример
Персональные данные
Платежный адрес
адреса доставки
Специальные возможности
Визуальный дизайн включает функции, призванные помочь пользователям понять, что аккордеон обеспечивает расширенные функции навигации с помощью клавиатуры.Когда кнопка заголовка аккордеона имеет фокус клавиатуры, стиль контейнера аккордеона и всех его кнопок заголовка изменяется.
Когда любая кнопка заголовка аккордеона получает фокус:
- Рамка, охватывающая всю гармошку, меняет цвет.
- Цвет фона кнопок заголовка аккордеона изменяется.
Кнопка заголовка аккордеона в фокусе:
- Имеет рамку, охватывающую как текст заголовка, так и значок.
- Имеет цвет фона, который отличает его от других кнопок-гармошек, которые не сфокусированы.
Поддержка клавиатуры
Ключ Функция Пробел или Введите Когда фокус находится на заголовке «гармошкой» свернутого раздела, этот раздел разворачивается. Вкладка - Перемещает фокус на следующий фокусируемый элемент.
- Все фокусируемые элементы в аккордеоне включены в последовательность страниц Вкладка .
Shift + Tab - Перемещает фокус на предыдущий фокусируемый элемент.
- Все фокусируемые элементы в аккордеоне включены в последовательность страниц Вкладка .
Стрелка вниз - Когда фокус находится на заголовке аккордеона, перемещает фокус на следующий заголовок аккордеона.
- Когда фокус находится на последнем заголовке аккордеона, перемещает фокус на первый заголовок аккордеона.
Стрелка вверх - Когда фокус находится на заголовке аккордеона, перемещает фокус на предыдущий заголовок аккордеона.
- Когда фокус находится на первом заголовке аккордеона, перемещает фокус на последний заголовок аккордеона.
Дом Когда фокус находится на заголовке аккордеона, перемещает фокус на первый заголовок аккордеона. Конец Когда фокус находится на заголовке аккордеона, перемещает фокус на последний заголовок аккордеона. Атрибуты роли, свойства, состояния и табиндекса
Роль Атрибут Элемент Использование ч4
- Элемент, который служит заголовком гармошки.
- Каждый элемент заголовка «гармошка» содержит кнопку, которая управляет видимостью его панели содержимого.
- В этом примере используется заголовок уровня 3, поэтому он правильно помещается в контуре страницы; пример содержится в разделе с заголовком уровня 2.
aria-extended = "true"
кнопка
Установите значение true
при раскрытии панели «Гармошка», в противном случае установите значениеfalse
.aria-controls = "ID"
кнопка
Указывает на идентификатор панели, которой управляет заголовок. aria-disabled = "true"
кнопка
Если панель «гармошка» развернута и не может быть свернута, установите значение true
.регион
дел
Создает область ориентира, содержащую развернутую в данный момент панель аккордеона. aria-labelledby = "IDREF"
дел
- Определяет доступное имя для элемента
области
. - Ссылается на кнопку заголовка гармошки, которая разворачивает и сворачивает область. Область
- ,
, элементы
должны иметь доступное имя, чтобы их можно было идентифицировать как ориентир.
Исходный код JavaScript и CSS
Исходный код HTML
Шаблон дизайна аккордеона в авторской практике WAI-ARIA 1.1
Accordion с Bootstrap 3 и без JS
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS..заголовок панели .accordion-toggle: после { / * символ «открывающихся» панелей * / семейство шрифтов: ‘Glyphicons Halflings’; / * необходимо для включения глификона * / содержание: «\ e114»; / * при необходимости отрегулируйте, взято из bootstrap.css * / float: right; / * при необходимости отрегулируйте * / цвет: серый; / * при необходимости отрегулируйте * / } .panel-heading .accordion-toggle.collapsed: after { / * символ для «свернутых» панелей * / содержание: «\ e080»; / * при необходимости отрегулируйте, взятое из начальной загрузки.css * / }
Пример складного аккордеона Javascript | Мобискролл
Используйте складные элементы и гармошку, чтобы создавать индивидуальные панели, группы и карточки, которые можно складывать одну за другой или поочередно закрывать и открывать. Используйте его для сегментирования длинных форм и контента или для постепенного раскрытия информации.
Разборные и аккордеонные демонстрации доступны для других фреймворков.Просмотр демонстраций и кода для
Просмотрите различные компоненты и демонстрации ЗакрыватьДемонстрация складной панели Javascript. Используйте его для сегментирования длинных форм, делая группы полей расширяемыми / сворачиваемыми. Обычный JS api для использования повсюду.
Демонстрация Javascript Accordion с одной открытой / расширенной панелью. Используйте это, чтобы пользователи могли сосредоточиться на одном фрагменте контента за раз. Обычный JS api для использования повсюду.
Пример складных карточек Javascript.Используйте его, чтобы показать / скрыть содержимое карты. Развернуть и свернуть при щелчке по заголовку карточки. Обычный JS api для использования повсюду.
Ищете что-то, чего не видели, или у вас есть вопрос о продаже?
Спросите нас о чем угодно
Спросите нас об этом, мы здесь, чтобы помочь.Настройте и попробуйте демонстрации локально
Войдите или начните пользоваться бесплатной пробной версией
Какой фреймворк вы используете?
Javascript
jQuery
AngularJS
Угловой
Реагировать
Другое
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Настройте и попробуйте демонстрации локально
Как бы вы хотели это сделать?
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Спасибо за скачивание
Попробуйте и настройте приложение локально
Распакуйте zip-файл и запустите проект, как любое приложение Ionic.Убедитесь, что у вас установлен Ionic CLI, и откройте терминал в корневой папке приложения.
Шаг 1. Запускаем в корневой папке$ npm установить
$ ионная подача
Сообщите нам, если мы сможем помочь и получить удовольствие!
Спасибо за скачивание
Настроить демонстрации локально
Все настроено так, что вы можете сразу окунуться и приступить к исследованию.
Извлеките zip-файл и просто откройте демонстрационные версии в своем любимом браузере. Инструкции по установке Mobiscroll в свой проект следуйте этому руководству.
Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Спасибо за скачивание
Настроить демонстрации локально
Извлеките zip-файл и запустите проект, как любое приложение Angular CLI.Убедитесь, что у вас установлен Angular CLI.
Для установки и использования распакуйте zip-файл, откройте окно терминала и выполните следующие действия.
Шаг 1. Запускаем в корневой папке$ npm установить
$ нг порция - открыть
Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Спасибо за скачивание
Настроить демонстрации локально
Все настроено так, что вы можете сразу окунуться и приступить к исследованию.
Мы настроили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.
Самый простой способ начать — следовать инструкциям по установке и получение кода прямо с демонстрационной страницы. Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
В zip-файле вы найдете полнофункциональное приложение Kitchen-Wink Ionic.
Спасибо за скачивание
Настроить демонстрации локально
В демонстрациях используется встроенный в браузер Babel преобразователь ES6 и JSX.
Извлеките zip-файл и откройте демонстрационные версии в своем браузере.
Инструкции по установке Mobiscroll в вашем проекте. следуйте этому руководству.Сообщите нам, если мы можем помочь и получить удовольствие!
Настройте и попробуйте эту демонстрацию локально
Войдите или начните пользоваться бесплатной пробной версией
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Ваш пароль изменен!
.
и