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.0

jQuery-плагин, для создания адаптивных вкладок (табы, аккордеон, спойлер)

Два режима отображения: 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)

Поддержка

Решение проблем/багов плагина, а также замечания и пожелания в соответствующей теме

По всем другим вопросам: [email protected]

Лицензия (MIT)

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

Адаптивный анимированный аккордеон на 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);

}

})();

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

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

Как сделать элегантный аккордеон с 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/[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, 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, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  
  
    Ссылка на 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. 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


 Элемент складной группы №1 
 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.
 Элемент складной группы №2 
 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.
 Элемент складной группы № 3 
 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 в вашем проекте.
 следуйте этому руководству. 
 Сообщите нам, если мы можем помочь и получить удовольствие!
 Настройте и попробуйте эту демонстрацию локально
 Войдите или начните пользоваться бесплатной пробной версией
 Измените пароль
 Необходимо обновить пароль? Войдите и нажмите кнопку под
 Измените пароль
 Необходимо обновить пароль? Войдите и нажмите кнопку под
 Ваш пароль изменен!
 .No related posts.

`alexxlab`

Разное

`Как часто можно делать клизму грудничку: рекомендации педиатров`

Разное

`Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы`

Разное

`Как успокоить плачущего ребенка: 10 эффективных способов`

Разное

`Что нужно новорожденному на первое время: полный список необходимых вещей`

Разное

`Пеленки для новорожденных: виды, размеры и способы использования`

Разное