Js аккордеон: Меню аккордеон на JS

Содержание

Адаптивный анимированный аккордеон на CSS3

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

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

Как создать адаптивный анимированный аккордеон на CSS3. Пошаговая инструкция.

Шаг 1. HTML

Как вы знаете, первого с чего мы начинаем это разметка, нам понадобиться контейнер, в котором будут содержаться классы заголовка, а также содержания при развертывании:

<dt>

<a href=»#accordion1″ aria-expanded=»false» aria-controls=»accordion1″>Заголовок</a>

</dt>

<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;

}

Стилизируем заголовки, также добавляя плюсики:

.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 будет отвечать за красивое развертывания нашего аккордеона:

(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);

}

})();

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

Вот и все. Готово!

Аккордион на JavaScript | Трепачёв Дмитрий

Давайте теперь реализуем аккордион. Он похож на вкладки, перевернутые на бок. При этом в аккордеоне можно закрыть текущую вкладку, если нажать на активную ссылку.

Вот образец:

Изучите также верстку, на которой мы будем решать задачу:

<div> <div> <div> <a href="#" >вкладка 1</a> </div> <div> текст вкладки 1 </div> </div> <div> <div> <a href="#" >вкладка 2</a> </div> <div> текст вкладки 2 </div> </div> <div> <div> <a href="#" >вкладка 3</a> </div> <div> текст вкладки 3 </div> </div> </div> #parent { margin: 0 auto; width: 400px; } .tab { margin-bottom: 10px; } .tab .link a { display: block; padding: 10px; color: black; text-decoration: none; text-align: center; background: #f8f8f8; border: 1px solid gray; } .tab .link:hover a { background: #f2f2f2; } .tab:not(.active) .text { display: none; } .tab .text { border: 1px dashed gray; border-top: none; padding: 10px; height: 300px; }

Обсуждение

Технически HTML код аккордеона удобнее, чем код вкладок: в нем ссылки расположены непосредственно над спойлером, который они открывают и закрывают. Кроме того, класс active в нашей верстки дается общему родителю ссылки и спойлера.

Это значит, что при нажатии на ссылку нужно просто деактивировать старую вкладку и активировать новую. Чтобы деактивировать старую вкладку нужно найти вкладку с классом active и удалить из нее этот класс.

Чтобы активировать новую вкладку нужно по клику на ссылку найти вкладку-родителя этой ссылки и дать ей класс active. Технически такой поиск можно сделать так: просто найти ближайшего родителя ссылки, имеющего класс tab.

Скопируйте себе приведенный HTML и CSS коды. Реализуйте аккордеон согласно описанному алгоритму.

Аккордеон jquery · GitHub

Instantly share code, notes, and snippets.

Аккордеон jquery

	// Accordeon jquery
	$(«.js-faq-title»).on(«click», function(e) { // .on приcоединяет для выбранных элементов функцию обработчика события
	e.preventDefault(); // отмена стандартных поведения ссылок
	var $this = $(this); // $this — это перменная // this — это ссылка на объект, который был выбран -> («.js-faq-title»)
	if (!$this.hasClass(«active»)) {
	$(«.js-faq-content»).slideUp(); // .slideUp() плавно скрывает выбранные элементы
	$(«.js-faq-title»).removeClass(«active»); // .removeClass() удаляет один или несколько имен классов для выбранных элементов
	}
	$this.toggleClass(«active»); // .toggleClass() добавляет или удаляет один, или несколько классов каждому выбранному элементу
	$this.next().slideToggle(); // .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением
	});

	// Accordeon Pug
	.faq__item
	a(href=’#’).faq-title.js-faq-title Question 1 // .js-faq-title для отлавлывания кликов
	.faq-content.js-faq-content // .js-faq-content для отлавлывания кликов
	p Lorem ipsum dolor sit amet

	// Accordeon sass
	.js-faq-content
	display: none

You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Bootstrap Accordion — примеры и руководство

 
          
            
              
                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseOne"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseOne"
                >
                  Аккордеонный предмет # 1
                
              
              
                
                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидатат долор
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, сырой джинсовый эстетический синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.
              
            
            
              
                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseTwo"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseTwo"
                >
                  Аккордеонный предмет # 2
                
              
              
                
                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидатат долор
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, сырой джинсовый эстетический синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.
              
            
            
              
                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseThree"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseThree"
                >
                  Аккордеонный предмет # 3
                
              
              
                
                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидатат долор
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, сырой джинсовый эстетический синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.

аккордеон-js — npm

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

Версия

3.1.1

Установка

npm

Установить пакет и импортировать файлы

  npm установить accordion-js

 импортный аккордеон от 'accordion-js';
import 'accordion-js / dist / accordion.min.css ';

CDN

Включать файлы с помощью CDN.

  https://unpkg.com/[email protected]/dist/accordion.min.css
https://unpkg.com/[email protected]/dist/accordion.min.js

Github

Вы также можете загружать файлы с Github и вручную прикреплять их к своему проекту.
Примечание: в производстве используйте файлы (JS и CSS) только из папки dist / .

Использование

Включить файлы

См. Раздел выше.

Создать HTML-макет

Это просто пример макета. Вы можете создать свою собственную HTML-структуру.

 
  
    
      

    
    
       Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
    
  

  
    
      <кнопка> Lorem ipsum dolor sit amet.
    
    
       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 (['. container-first', '.container-second'], {});

// или передать массив с HTMLElements
const accordions = Array.from (document.querySelectorAll ('. Accordion-container'));
новый Accordion (аккордеоны, {});

// Отсоединить события
const accordion = новый Accordion ('.контейнер-первый ');
Accordion.detachEvents ();

Опции

Опция	Тип	Значение по умолчанию	Описание
продолжительность	номер	600	Продолжительность анимации в мс
ariaEnabled	логическое	правда	Добавить элементы ARIA в структуру HTML
развал	логическое	правда	Разрешить сворачивание развернутой панели
показать	логическое	ложь	Показать несколько элементов одновременно
открытыйOnInit	массив	[]	Показать элементы аккордеона во время инициализации
элемент Класс	строка	‘ac’	Класс элемента
триггер Класс	строка	триггер переменного тока	Класс срабатывания
панель Класс	строка	«ac-панель»	Класс панели
активный класс	строка	активен	Класс активного элемента
до открытия	функция	–	Вызов перед открытием элемента. `beforeOpen: (currElement) => {}`
on Открыть	функция	–	Вызывает при открытии элемента. `onOpen: (currElement) => {}`
доЗакрыть	функция	–	Звонки перед закрытием позиции. `beforeClose: (currElement) => {}`
вкл. Закрыть	функция	–	Звонит, когда элемент закрыт. `onClose: (currElement) => {}`

Методы

Опция	Описание	Аргументы
attachEvents ()	Присоединить события	–
detachEvents ()	Отключить события	–
открыть ()	Откройте элемент аккордеона с заданным идентификатором Например, `в соотв. Открыто (1)`	`idx` — индекс элемента
закрыть ()	Закройте элемент аккордеона с заданным идентификатором E.грамм. `в соотв. Закрыть (1)`	`idx` — индекс элемента
переключатель ()	Переключить элемент аккордеона с заданным идентификатором Например, `в соотв. Переключатель (1)`	`idx` — индекс элемента
открыть Все ()	Открыть все элементы гармошки	–
закрытьВсе ()	Закрыть все элементы гармошки	–
уничтожить ()	Уничтожить экземпляр аккордеона: Открыть элементы, удалить события, идентификаторы и ARIA	–

v3 Информация о выпуске

В версии 3 API претерпело множество изменений.0.0 , поэтому, если вы используете предыдущие версии аккордеона ( 2.8.0 и ниже), я рекомендую обновить пакет до последней версии с новой структурой и опциями.

10 лучших аккордеонных компонентов на чистом JavaScript и CSS (обновление 2021 г.)

Вот постоянно обновляемый список из 10 лучших компонентов / виджетов Accordion на основе JavaScript и CSS для систем часто задаваемых вопросов и компонентов переключения контента. Надеюсь, вам это нравится, и вы не забываете распространять мир.

Первоначально опубликовано 20 ноября 2017 г., обновлено 7 апреля 2021 г.

1.Многоуровневое двухуровневое меню с простым HTML и CSS

Скачать демо

Простой подход Html5 / CSS3 к созданию многоуровневого скользящего аккордеонного меню из вложенных списков html. Он использует хаки с флажками и метками для переключения иерархических меню и несколько свойств CSS3 для плавных эффектов скольжения.

2. Простой простой интерфейс «аккордеон»

Скачать демо

Решение на чистом JavaScript / CSS, которое поможет вам создать вертикальный настраиваемый плавно скользящий интерфейс «аккордеон» из простой структуры html.

3. Адаптивный горизонтальный аккордеон на чистом CSS

Скачать демо

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

4. Создание вложенного интерфейса Accordion & Content Toggle с помощью JavaScript — handy-collapse.js

Скачать демо

Небольшой ванильный плагин 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 для создания интерфейсов аккордеона в веб-приложении, не забудьте ознакомиться с другими нашими замечательными ресурсами:

22 ReactJS Accordions

Коллекция бесплатных аккордеонов ReactJS: вертикальные, вложенные и т.д. Обновление коллекции за апрель 2018 г. 6 новинок.

Аккордеоны CSS
Аккордеоны для бутстрапа
CSS Аккордеонное меню
Аккордеоны jQuery

Автор

Каталин Мирон
17 июля 2020

О коде

Аккордеонное меню React Native

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Уджавал Чаттерджи
5 июля 2020

О коде

Анимированный аккордеон с использованием React

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: font-awesome.css, реагировать-dom.js

Автор

DEVZONE TECH Ltd.
31 мая 2019 г.

О коде

Сворачиваемый компонент ReactJS

Складной аккордеонный компонент ReactJs. Легкий, простой и функциональный. Позволяет разворачивать и сворачивать содержимое HTML. Готов к использованию в вашем приложении ReactJs.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Киран Шинде
16 апреля 2019

О коде

Аккордеон React Native

Аккордеан в React Native.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Автор

Сай Гаутам
28 июня 2018

О коде

Аккордеон React

React accordion, чтобы увидеть больше примеров.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

адаптивный: да

Зависимости: —

Pretty React.js аккордеон.

Простой легкий аккордеонный компонент (1,5 КБ, уменьшенный + сжатый).

Классный аккордеон с React.js.

Доступный аккордеонный компонент для React.

React аккордеонный компонент с анимацией разворачивания / свертывания CSS. Триггер события можно настроить для любого компонента, например для навигации и содержимого.

React аккордеонный компонент с настраиваемым заголовком flexbox.

Компонент пользовательского интерфейса React Accordion.

Автор

Мэтью Винсент
9 марта 2016

О коде

Аккордеон — React

Компонент Accordion, созданный на React.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css, реагировать-dom.js

Компонент React для обертывания содержимого в элементе «аккордеон».

Компонент React для обертывания содержимого в сворачиваемый элемент с триггером для открытия и закрытия. Это как аккордеон, но где одновременно может быть открыто любое количество секций.

Минимальный компонент аккордеона пользовательского интерфейса, написанный на React.

Универсальные, семантические и доступные компоненты управления состоянием React для создания аккордеонов и вкладок.

Реагировать на коллапс / аккордеон.

Анимированный складной компонент для React Native, подходит для аккордеонов, переключателей и т. Д.

Доступный компонент React Accordion.

react-native-accordion — это простой в использовании аккордеонный компонент для приложения React Native.

Простой аккордеон в React.js.

React Accordion component — Material-UI

Accordions содержат потоки создания и позволяют облегчить редактирование элемента.

Аккордеон — это легкий контейнер, который может стоять отдельно или присоединяться к большей поверхности, например к карточке.

Примечание. Аккордеоны больше не документируются в руководствах по материальному дизайну, но Material-UI продолжит их поддерживать. Ранее она была известна как «панель расширения».

Простой аккордеон

Управляемый аккордеон

Расширьте поведение по умолчанию, чтобы создать аккордеон с помощью компонента Accordion .

Дополнительные действия

Чтобы установить действие, такое как Checkbox или кнопку внутри AccordionSummary , вам необходимо остановить распространение фокуса и событий щелчка, чтобы предотвратить перемещение аккордеона. расширяется / сворачивается при использовании действия. Вы также должны предоставить aria-label для действия, в противном случае метка вложенного действия будет включена в метка родительской кнопки, которая управляет раскрытием аккордеона.

Performance

Содержимое Accordions монтируется по умолчанию, даже если аккордеон не расширен.Это поведение по умолчанию имеет в виду рендеринг на стороне сервера и SEO. Если вы визуализируете дорогие деревья компонентов внутри деталей вашего аккордеона или просто визуализируете многие аккордеоны было бы неплохо изменить это поведение по умолчанию, включив unmountOnExit в TransitionProps :

Как и любая оптимизация производительности, это не серебряная пуля. Обязательно идентифицировать сначала узкие места, а затем попробуйте эти стратегии оптимизации.

Вторичный заголовок и столбцы

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

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

Для оптимального доступа мы рекомендуем установить id и aria-controls на AccordionSummary . Accordion получит необходимые арии с маркировкой и id для области содержимого аккордеона.

JavaScript Accordion JavaScript Programming Exercise

Я здесь, чтобы помочь вам изучить , достичь своей мечты , приходите присоединяйтесь ко мне в этом удивительном приключении сегодня
Google Developers Expert — GSuite

Обеспечение веб-разработки курсы и курсы по стратегии цифрового маркетинга с 2002 года.

Эксперт в области инновационных технологий с широким спектром практического опыта. Предоставление интеллектуальных цифровых решений в Интернете как для малого, так и для корпоративного уровня.

«У меня есть страсть ко всему, что связано с цифровыми технологиями, мне нравится программировать и решать задачи успешного развития цифровых технологий. Как опытный разработчик, я создал свои первые компьютерные приложения в 1990 году и свой первый веб-сайт в 1998 году. знания с другими и хочу помочь вам поделиться чудесными возможностями, которые предоставляет Интернет ».

«Обучение, понимание и сильная страсть к образованию. Интернет предоставил нам новые возможности для расширения и обмена знаниями .»

Хотите узнать больше о том, как стать веб-разработчиком, вы хотите ощутить свободу, которую предоставляют нам технологии? Узнайте, как воплотить в жизнь удивительные вещи в Интернете. Технология объединяет всех нас во многих отношениях. Она открывает двери для тех, кто принимает это и узнает, как сделать эти связи реальными.

«Мои курсы призваны помочь вам в достижении ваших целей, изучении и обновлении навыков»

Предпосылки : опытный разработчик веб-приложений, работавший на нескольких предприятиях приложений уровня, сотни веб-сайтов, бизнес-решения и множество уникальных и инновационных веб-приложений.Специализация в области разработки веб-приложений включает HTML, CSS, JavaScript, JQuery, Bootstrap, PHP и MySQL . Все, что связано с веб-созданием и цифровым опытом. Увлечен всем, что связано с разработкой веб-приложений , программированием и интернет-маркетингом с упором на социальных сетей и SEO .

« Понимание технологий позволяет лучше общаться с пользователями. . Это также открывает множество дверей.Знания — ключ к успеху, и я хочу помочь вам узнать, что предлагают технологии. Я увлечен веб-технологиями и с нетерпением жду возможности поделиться с вами своими знаниями и опытом! »

Мой любимый доступный образец аккордеона

Блог / Мой любимый доступный образец аккордеона

Accordions — полезные компоненты на веб-страницах для сокрытия некоторого контента от пользователей, которым это может не понадобиться или которые хотят прочитать его прямо сейчас.Типичное использование включает страницы с часто задаваемыми вопросами (FAQ) или скрытие разделов веб-страницы при отображении на небольших устройствах.

Так можно ли сделать доступную аккордеонную составляющую?

Ну да, это возможно. С помощью некоторых атрибутов ARIA и некоторого простого JavaScript можно создать доступный шаблон «аккордеон», который будет понятен и использован всеми посетителями сайта.

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

Аккордеоны, используемые на веб-сайте зубных имплантатов.

Между прочим, если вы думали, что можете использовать собственные элементы HTML5

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

Stop Press: если вам нравится то, что вы читаете в этом посте, и вы хотите большего, ознакомьтесь с нашими новыми курсами по специальным возможностям для веб-разработчиков, где я могу глубже познакомить вас с доступной веб-разработкой.

Требования к доступному аккордеону

Прежде чем мы начнем рассматривать различные варианты паттернов аккордеона, полезно подумать о ключевых требованиях, которые будут составлять доступный аккордеон.

Итак, вот мой список обязательных вещей — аккордеон:

Управляется щелчком мыши.
Может управляться сенсорным экраном на смартфонах, планшетах или настольных компьютерах / ноутбуках с сенсорными экранами.
Может работать с клавиатурой — важно для зрячих пользователей, использующих только клавиатуру, и пользователей программ чтения с экрана настольных компьютеров / ноутбуков.
Можно легко управлять программным обеспечением для распознавания речи, таким как Dragon NaturallySpeaking.
Пользователи могут легко управлять с помощью инструментов увеличения экрана.
Может быть легко понятен читателям с экрана — знают ли они, что компонент интерактивен, и скрыто ли его содержимое или нет.
При необходимости должна быть возможность закрыть все панели «гармошка».
Раскрытие контента не зависит от JavaScript
Аккордеон должен хорошо выглядеть и сигнализировать о функциональности зрячим пользователям.

Существующие шаблоны

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

Однако, как и многие настраиваемые элементы управления, в Интернете можно найти доступные примеры работающих аккордеонов.Среди прочего, есть примеры от W3C (Worldwide Web Consortium), Sitepoint, Scott O’Hara и Heydon Pickering. Все это хорошие примеры, но по той или иной причине они не совсем то, что я ищу.

Существуют примеры (включая Vanilla Accessibility), которые используют метод разметки role = "tab" , role = "tabpanel" для аккордеонов. Этот метод разделяет роли ARIA с панелями вкладок, и его использование с аккордеонами теперь не рекомендуется.Поэтому я бы не рекомендовал следовать этой модели.

Здесь я представлю свое идеальное решение и покажу свое мышление, чтобы вы могли сравнить методы, чтобы увидеть, какой из них вам подходит.

Прогрессивное улучшение

Прежде чем я перейду к коду, важно уточнить требование 8 из моего списка выше. Если вы подробно посмотрите статистику просмотров вашего веб-сайта (или любого другого веб-сайта), вы, вероятно, увидите, что у небольшого процента посетителей сайта по какой-то причине неактивен JavaScript. Это может быть связано с тем, что они находятся в офисной среде, которая блокирует JavaScript на настольных компьютерах, из-за предполагаемых проблем с безопасностью или просто потому, что файлы JavaScript для вашего сайта не загружаются.

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

Имеет ли это смысл семантически?

Используя наш пример часто задаваемых вопросов, я хочу, чтобы вопросы были легко найдены каждым, поэтому было бы разумно сделать их правильно размеченными заголовками.Заголовки полезны для зрячих пользователей, а также для пользователей программ чтения с экрана.

Мы не только хотим, чтобы вопрос был легко найден, но и чтобы он был интерактивным элементом, чтобы люди могли активировать его, чтобы скрыть и показать ответ на вопрос. Итак, лучший элемент для использования — это кнопка.

Построим доступный аккордеон

Я собираюсь и дальше использовать аккордеон «Вопросы и ответы» в качестве примера и постараюсь на каждом этапе объяснять, что я делаю и почему это важно для доступности.

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

Начальная настройка

Наша первоначальная установка будет состоять из серии заголовков (все на одном уровне), которые образуют «вопросы», а затем параграфа или двух или другого содержания после каждого заголовка, который даст ответ.

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

Итак, вот наш исходный код:

 
  Как подписаться на рассылку новостей?  
 Просто заполните нашу форму членства, и вы сразу же начнете получать информационные бюллетени.

  Могу ли я контролировать частоту?  
 При регистрации вы можете выбрать частоту получения информационных бюллетеней. 

--- другие вопросы и ответы ---

Добавить интерактивные элементы

Первым шагом для нашей настройки JavaScript является добавление интерактивного элемента для каждого вопроса — элемента

Создание и скрытие панелей ответов

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

Итак, нам нужно заставить наш JavaScript искать следующий заголовок (правильного уровня) в контейнере аккордеона и заключить его все.

Еще раз, другие элементы должны будут ссылаться непосредственно на эту панель, поэтому давайте присвоим ей соответствующее значение id. Мы также хотим, чтобы он был скрыт по умолчанию, поэтому давайте дадим ему подходящее имя класса, которое распознает наш CSS.Панель следует скрыть с помощью display: none, чтобы убедиться, что она скрыта от всех пользователей и вспомогательных технологий. В качестве альтернативы мы могли бы использовать атрибут hidden , если захотим — поскольку поддержка этого атрибута браузерами / программами чтения с экрана сейчас довольно хороша.

Теперь это должно выглядеть так:

 
 Просто заполните нашу форму членства, и вы сразу же начнете получать информационные бюллетени.

Добавить в свойствах ARIA

Аккордеоны, используемые в Википедии, при просмотре на смартфоне.Свойства

ARIA могут помочь программам чтения с экрана понять взаимосвязь между элементами на странице.

Здесь у нас есть интерактивный элемент, который управляет другим элементом, поэтому мы можем использовать атрибут aria-controls в

aria-labelledby = "кнопка-гармошка-01" >

Просто заполните нашу форму членства, и вы сразу же начнете получать информационные бюллетени.

Добавить в штатах ARIA

Последний бит ARIA, который нам нужно добавить для пользователей программ чтения с экрана, — это «состояние» панели, т.е. независимо от того, открыто оно или нет. Для этого мы должны использовать атрибут aria-extended . Но вместо того, чтобы размещать его на самой панели, мы помещаем этот атрибут на кнопку, поскольку это элемент, с которым взаимодействует пользователь программы чтения с экрана.

aria-extended — это логический атрибут, что означает, что его возможные значения — «истина» или «ложь».Поскольку панели скрыты в начале, мы должны изначально установить значение атрибута на «false», что обычно приводит к тому, что программы чтения с экрана объявляют «свернуты» или что-то подобное.

Итак, наш пример теперь будет выглядеть так:

   
  

 Просто заполните нашу форму членства, и вы сразу же начнете получать информационные бюллетени.

Когда панель открыта, значение атрибута aria-extended должно быть изменено на «true». Программы чтения с экрана теперь обычно озвучивают это как «расширенное». Переключение значения атрибута aria-extended таким образом устраняет необходимость обновления текста кнопки для пользователей программ чтения с экрана.

Заставляем его работать

Когда пользователь нажимает кнопку (с помощью клавиши Enter или пробела), когда панель скрыта, должны произойти следующие вещи — в следующем порядке:

Измените класс или удалите скрытый атрибут, чтобы отобразить панель.
Измените значение атрибута aria-extended на «true».

Теперь наш пример должен выглядеть так:

   
  

 Просто заполните нашу форму членства, и вы сразу же начнете получать информационные бюллетени.

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

Настройте классы или добавьте скрытый атрибут, чтобы скрыть панель.
Измените значение атрибута aria-extended на «false».
Сосредоточьтесь на кнопке.

Программы чтения с экрана обычно озвучивают «свернуто», когда это произошло.

Другие улучшения

Некоторые доступные шаблоны аккордеона дают панелям аккордеона атрибут role = "region" .Наряду с использованием атрибута aria-labelledby это создает роль ориентира на странице, что упрощает поиск пользователей программ чтения с экрана.

Примечания к стилю

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

Примеры индикации могут включать стрелки, указывающие вниз, или символ «плюс» (+). Когда панель открыта, к кнопке могут быть прикреплены соответствующие стили — например, направленная вверх стрелка или символ минуса (-).

Эти стили могут быть прикреплены к кнопке с помощью селекторов атрибутов CSS на основе значения атрибута aria-extended .

Рабочий пример доступного аккордеона

Итак, вы можете увидеть это в действии. Я создал страницу, на которой показан рабочий пример шаблона «аккордеон» со специальными возможностями, который мне нравится.Он основан на описанных выше методах:

Рабочий доступный пример аккордеона.

Как вы думаете?

Мы надеемся, что эти идеи будут вам полезны, и хотели бы услышать ваш опыт внедрения доступных аккордеонов. Пожалуйста, поделитесь своими комментариями ниже.

Хотите больше?

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

Адаптивный анимированный аккордеон на CSS3

Как создать адаптивный анимированный аккордеон на CSS3. Пошаговая инструкция.

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Аккордион на JavaScript | Трепачёв Дмитрий

Обсуждение

Аккордеон jquery · GitHub

Bootstrap Accordion — примеры и руководство

кнопка

кнопка

кнопка

аккордеон-js — npm

Версия

Установка

npm

CDN

Github

Использование

Включить файлы

Создать HTML-макет

Инициализировать модуль

API

Примеры

Опции

Методы

v3 Информация о выпуске

10 лучших аккордеонных компонентов на чистом JavaScript и CSS (обновление 2021 г.)

1.Многоуровневое двухуровневое меню с простым HTML и CSS

2. Простой простой интерфейс «аккордеон»

3. Адаптивный горизонтальный аккордеон на чистом CSS

4. Создание вложенного интерфейса Accordion & Content Toggle с помощью JavaScript — handy-collapse.js

5. Компонент «Аккордеон и вкладки» только для CSS

6. Ползунок «Гармошка» с горизонтальным отзывчивым изображением на чистом CSS

7. Гладкий аккордеон с элементом раскрытия деталей

8. Вертикальный аккордеон на основе Flexbox с чистым CSS

9. Необычный слайдер-гармошка с чистым CSS

10. Адаптивные вкладки / аккордеон в ванильном JavaScript

Дополнительные ресурсы:

22 ReactJS Accordions

Автор

О коде

Аккордеонное меню React Native

Автор

О коде

Анимированный аккордеон с использованием React

Автор

О коде

Сворачиваемый компонент ReactJS

Автор

О коде

Аккордеон React Native

Автор

О коде

Аккордеон React

Автор

О коде

Аккордеон — React

React Accordion component — Material-UI

Простой аккордеон

Управляемый аккордеон

Дополнительные действия

Performance

Вторичный заголовок и столбцы

Доступность

JavaScript Accordion JavaScript Programming Exercise

Мой любимый доступный образец аккордеона

Требования к доступному аккордеону

Существующие шаблоны

Прогрессивное улучшение

Имеет ли это смысл семантически?

Построим доступный аккордеон

Начальная настройка

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

Могу ли я контролировать частоту?

Добавить интерактивные элементы

Создание и скрытие панелей ответов