Js аккордеон: Как создать вертикальный аккордеон для сайта

Содержание

JavaScript — аккордеон — Русские Блоги

Структура страницы

 <div>
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
        </ul>
    </div>
    <script src="./animation.js"></script>

css

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 2400px;
        }

        #box {
            width: 1200px;
            height: 400px;
            border: 2px solid red;
            margin: 100px auto;
            overflow: hidden;
        }

        #box li {
            width: 240px;
            height: 400px;
            float: left;
        }
    </style>

js

<script>
       
        var box = document.querySelector('#box');
        var li = document.querySelectorAll('#box li');
        console.log(li);
        
        for (var i = 0; i < li.length; i++) {
            
            li[i].onmouseover = function () {
                for( var j=0;j<li.length;j++){
                    if(li[j]==this){
                        animationslow(li[j],{width:800})
                    }else{
                        animationslow(li[j],{width:100})
                    }
                }
            }   
        }

        
        box.onmouseout=function(){
           for( var i=0;i<li.length;i++){
            animationslow(li[i],{width:240})
           }
        }
    </script>

JS медленный пакет движения

function animationslow(ele, attrs, fn) {
    
    clearInterval(ele.timeID);
    ele.timeID = setInterval(function () {
        
        var isOK = true;
        for (var key in attrs) {
            
            var attr = key; 
            var target = attrs[key];
            
            if (attr == 'opacity') {
                
                
                
                var current = parseFloat(getComputedStyle(ele)[attr]);
                
                current *= 100;
                target *= 100;
                
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                
                current += step;
                
                ele.style[attr] = current / 100;

            } else if (attr == 'zIndex') {
                
                ele.style[attr] = target;

            } else {
                
                var current = parseInt(getComputedStyle(ele)[attr]);
                
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                
                current += step;
                
                ele.style[attr] = current + 'px';
                
                if (current != target) {
                    isOK = false;
                }
            }
        }
        
        if (isOK) {
            clearInterval(ele.timeID);
            
            
            if (typeof fn == 'function') {
                fn();
            };
        }
    }, 30)

}

javascript — Почему мой аккордеон Bootstrap не работает должным образом?

Я создаю сайт с помощью Bootstrap 4, и у меня есть 3 <div>, каждый из которых содержит аккордеон. У каждого <div> есть свой id, поэтому я могу показать / скрыть тот, который мне нужен. У меня проблемы с открытием и сворачиванием некоторых частей всех аккордеонов (когда я открываю одну, другая не закрывается. Другие просто не открываются вообще).

Мой код здесь. (Нажмите кнопки «Sobre Paygol», «Vendedores» и «Compradores»).

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

popper.min.js.map:1 Uncaught SyntaxError: Unexpected token ':'

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

Мои скрипты загружаются как таковые:

<script src="js/popper.min.js"></script>
<script src="js/popper.min.js.map"></script>
<script src="js/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
crossorigin="anonymous"></script>

Обратите внимание, что во второй строке я добавил файл popper.min.js.map, который я скачал с Github.

0

Paula

10 Сен 2020 в 22:38

2 ответа

Лучший ответ

Я не думаю, что ваши проблемы как-то связаны с ошибкой исходной карты. У вас есть несколько ошибок в вашем HTML:

  1. Неверный родительский ID
  2. Дополнительный класс .hide, который предотвращает отображение складных
  3. Несколько элементов с одинаковым идентификатором, например #accordion

На странице http://18.230.62.117/support.html#faqAboutPaygol вы ошиблись родительские идентификаторы в вашем HTML.

<div>
    <div>
        <div>
            <h5>
                <button data-toggle="collapse" 
                    data-target="#collapseQuestionOne" aria-expanded="true" 
                    aria-controls="collapseQuestionOne">
                      ¿Qué es Paygol?
                </button>
            </h5>
        </div>
        <div 
            aria-labelledby="headingQuestionOne" data-parent="#accordion">
            <div>
                Paygol es una plataforma de pago en línea que permite a vendedores 
                recibir pagos a través de una amplia variedad de métodos de pago de 
                una manera rápida y fácil.
            </div>
        </div>
    </div>
    <div />
    <div />
</div>

См. Идентификатор вашего аккордеона «accordionQuestions», но ваш data-parent="#accordion".

На странице http://18.230.62.117/support.html#faqVendedores у вас есть дополнительный .hide класс на первом сворачиваемом элементе:

<div>
    <div>
        <div>
            <h5 />
        </div>    
        <div>
            <div />
        </div>
    </div>
    <div />
    ...
</div>

Вот почему первый складной элемент не откроется даже при нажатии на него.

Это снова происходит на странице http://18.230.62.117/support.html#faqCompradores.

Также обратите внимание, поскольку вы делаете одностраничное приложение, у вас не может быть нескольких элементов с одним и тем же идентификатором, например, <div id="#accordion />. Это напортачило с плагином аккордеона.

0

David Liang
10 Сен 2020 в 22:47

Похоже, что ошибка находится в popper.min.js.map согласно вкладке разработчика в Chrome.

Поэтому удалите следующую строку из popper.min.js. Это все внизу. Вы можете удалить файл карты после.

//# sourceMappingURL=popper.min.js.map

0

VDWWD
10 Сен 2020 в 20:39

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

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

 

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

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

Шаг 1. HTML

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

<dt>

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

</dt>

<dd aria-hidden=»true»>

<p>Содержание контейнера</p>

</dd>

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

Шаг 2. CSS

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

.accordion dl,

.accordion-list {

border: 1px solid #ddd;

}

.accordion dl:after,

.accordion-list:after {

content: «»;

display: block;

height: 1em;

width: 100%;

background-color: #2ba659;

}

Форматируем текст в середине аккордеона:

.accordion p {

padding: 1em 2em 1em 2em;

}

 

.accordion {

position: relative;

background-color: #eee;

}

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

.container {

max-width: 960px;

margin: 0 auto;

padding: 2em 0 2em 0;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

.accordionTitle,

.accordion__Heading {

background-color: #38cc70;

text-align: center;

font-weight: 700;

padding: 2em;

display: block;

text-decoration: none;

color: #fff;

transition: background-color 0.5s ease-in-out;

border-bottom: 1px solid #30bb64;

}

.accordionTitle:before,

.accordion__Heading:before {

content: «+»;

font-size: 1.5em;

line-height: 0.5em;

float: left;

transition: -webkit-transform 0.3s ease-in-out;

transition: transform 0.3s ease-in-out;

transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

}

.accordionTitle:hover,

.accordion__Heading:hover {

background-color: #2ba659;

}

Нам необходимо, чтобы плюсики крутились при развертывании, делаем мы это следующим образом:

.accordionTitleActive,

.accordionTitle.is-expanded {

background-color: #2ba659;

}

.accordionTitleActive:before,

.accordionTitle.is-expanded:before {

-webkit-transform: rotate(-225deg);

transform: rotate(-225deg);

}

У нас еще будут стили адаптива, полный их список можете просмотреть в исходниках к данному уроку.

Шаг 3. JS

Теперь нам необходимо добавить немного магии, именно js будет отвечать за красивое развертывания нашего аккордеона:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

(function(){

var d = document,

accordionToggles = d.querySelectorAll(‘.js-accordionTrigger’),

setAria,

setAccordionAria,

switchAccordion,

touchSupported = (‘ontouchstart’ in window),

pointerSupported = (‘pointerdown’ in window);

 

skipClickDelay = function(e){

e.preventDefault();

e.target.click();

}

 

setAriaAttr = function(el, ariaType, newProperty){

el.setAttribute(ariaType, newProperty);

};

setAccordionAria = function(el1, el2, expanded){

switch(expanded) {

case «true»:

setAriaAttr(el1, ‘aria-expanded’, ‘true’);

setAriaAttr(el2, ‘aria-hidden’, ‘false’);

break;

case «false»:

setAriaAttr(el1, ‘aria-expanded’, ‘false’);

setAriaAttr(el2, ‘aria-hidden’, ‘true’);

break;

default:

break;

}

};

//функции

switchAccordion = function(e) {

console.log(«triggered»);

e.preventDefault();

var thisAnswer = e.target.parentNode.nextElementSibling;

var thisQuestion = e.target;

if(thisAnswer.classList.contains(‘is-collapsed’)) {

setAccordionAria(thisQuestion, thisAnswer, ‘true’);

} else {

setAccordionAria(thisQuestion, thisAnswer, ‘false’);

}

thisQuestion.classList.toggle(‘is-collapsed’);

thisQuestion.classList.toggle(‘is-expanded’);

thisAnswer.classList.toggle(‘is-collapsed’);

thisAnswer.classList.toggle(‘is-expanded’);

 

thisAnswer.classList.toggle(‘animateIn’);

};

for (var i=0,len=accordionToggles.length; i<len; i++) {

if(touchSupported) {

accordionToggles[i].addEventListener(‘touchstart’, skipClickDelay, false);

}

if(pointerSupported){

accordionToggles[i].addEventListener(‘pointerdown’, skipClickDelay, false);

}

accordionToggles[i].addEventListener(‘click’, switchAccordion, false);

}

})();

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

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

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

Меню «Аккордеон» без javascript и изображений – Dobrovoimaster

Все чаще и чаще на страницах сайтов можно встретить использование меню навигации в стиле «аккордеон». Широкое применение такой вид меню находит у разработчиков тем для WordPress, это и понятно, компактность и информативность, а так же стиль оформления делают «аккордеон» все более популярным.
В плане оформления и способов вывода таких блоков на страницы сайта работают ребята с размахом, благо есть где развернуться. Чаще всего, блоки навигации в стиле «аккордеон» создаются с применением javascript, для создания эффекта анимации раскрывающихся списков или контейнеров с контентом, заголовки пунктов меню оформляются с использованием изображений, об этом я писал ранее Создаем блок навигации в стиле Аккордеон. Это в какой то мере способствует правильной работе меню в большинстве браузеров, но меня всегда больше привлекает возможность применения новых стандартов CSS3 в работе над дизайном.
 

Внимание!
Данная статья с течением времени стала неактуальна, так как появилась обновленная версия меню «Аккордеон», одинаково хорошо работающая во всех браузерах. Смотрите подробное описание и наглядный пример в новой статье:

Кроссбраузерный «аккордеон» с помощью CSS3

 
Сегодня хочу рассказать и показать, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «Аккордеон».
 

 

Прежде чем начнем расклад всех составляющих, можете посмотреть работу меню на живом примере, а открыв исходный код демо-страницы, с легкостью въедете в тему:

Разметка HTML

Начнем работу по созданию меню с разметки на странице HTML, я уверен, что многих удивит на сколько прост код каркаса всего меню. Создадим контейнер div и присвоим ему id=”accordion”. Каждому пункту меню пропишем div class=”item”. Заголовки пунктов меню обозначим тегом h4, а содержание блоков с тега P. В примере я использовал в содержании блоков меню списки, а значит и в стиле и в разметке html код будет выглядеть несколько иначе. Здесь же приведу основу раскладки меню, от чего и можно будет отталкиваться при дальнейшей доработки под свои нужды.

 

<div>
    <div>
        <h4>Новости</h4>
        <p>"Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля."</p>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

<div id=”accordion”> <div class=”item”> <h4>Новости</h4> <p>”Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля.”</p> </div> <div class=”item”> </div> <div class=”item”> </div> <div class=”item”> </div> </div>

 

Основные CSS

С оформлением нашего меню через стили CSS, трудностей не возникнет, все по накатанной и без лишних выкрутасов:
 

#accordion .item {
    width: 400px;
    height: 30px; 
    overflow: hidden;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion h4 {
    display: block;
    height: 20px;
    line-height: 20px;
    margin: 0px 0px 5px 0px;
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover h4 {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

#accordion .item { width: 400px; height: 30px; overflow: hidden; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion h4 { display: block; height: 20px; line-height: 20px; margin: 0px 0px 5px 0px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; } #accordion div:hover h4 { border-bottom: 1px solid #ccc; font-weight: bold; }

 

При размещении в блоках меню содержания, включающего в себя разного рода списки ( Рубрики, Архивы или Метки), соответственно стоит прописать стили и для этих элементов

 

.aleft {
   float:left;
   width:90px;
}
.aright {
   float:left;
   width:90px;
}
.arsip li {
   float: left;
   width: 120px;
}
.clearfix {
   display: inline-block;
}

.aleft { float:left; width:90px; } .aright { float:left; width:90px; } .arsip li { float: left; width: 120px; } .clearfix { display: inline-block; }

 

Например, чтобы разместить список рубрик в две колонки (что логичнее всего), присваиваете тегу ul класс .aleft для левой и класс .aright для правой колонки. В общем от чего плясать понятно, а дальше, это кому как нравиться.
Сразу хочу отметить, что закругленные углы (border-radius) и все прелести CSS3, тормознутый и горячо не любимый IE, обрабатывать отказывается напрочь, в остальных человеческих браузерах (Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+) все выглядит прекрасно.

 

 

CSS3 Transition

Вот наконец-то мы и подобрались к самому интересному, а именно с помощью чего достигается переход к содержимому блоков меню, то есть сам эффект «аккордеон». Каждому пункту меню прописываем правило CSS transition:

 

#accordion .item { 
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
    height: 180px; 
}

#accordion .item { transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; } #accordion div:hover { height: 180px; }

 

Свойство CSS3 Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени, в нашем конкретном случае мы используем для открытия содержания пунктов меню с эффектом задержки 500ms.
CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек, CSS3 Transitions как раз из этой обоймы. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно, наше меню «Аккордеон» отличное тому подтверждение.

В довершение всей проделанной работе, остается собрать воедино весь полученный код стилей CSS:

 

#accordion .item {
    width: 400px;
    height: 30px; 
    overflow: hidden;
 
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
 
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
 
    margin-bottom: 2px;
}
#accordion h4{
    display: block;
    height: 20px;
    line-height: 20px;
 
    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px; 
}
#accordion div:hover h4 {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

#accordion .item { width: 400px; height: 30px; overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordion h4{ display: block; height: 20px; line-height: 20px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } #accordion p { height: 150px; padding: 5px; } #accordion div:hover { height: 180px; } #accordion div:hover h4 { border-bottom: 1px solid #ccc; font-weight: bold; }

 

На этом все, проделав все эти нехитрые манипуляции, поэкспериментировав с параметрами стилей на свой лад, вы получите интересное меню в стиле «Аккордеон» без использования javascript в виде jQuery и каких либо изображений. Надеюсь эта статья поможет вам придать движухи вашему сайту.

Внимание!
Данная статья с течением времени стала неактуальна, так как появилась обновленная версия меню «Аккордеон», одинаково хорошо работающая во всех браузерах. Смотрите подробное описание и наглядный пример в новой статье:

Кроссбраузерный «аккордеон» с помощью CSS3

Тарифные планы Tilda Publishing

1. В чем отличие тарифных планов Personal и Business?
Тарифный план Business включает в себя все то, что есть в плане Personal, плюс позволяет экспортировать код сайтов и создавать до 5 сайтов внутри одного аккаунта (Personal — 1 сайт).

2. Можно ли привязать свой домен к сайту, сделанному на Тильде?
Да. Вы можете использовать свой домен и настроить его привязку к проекту, который сделан на Тильде. Прочитайте инструкцию, как это сделать.

3. Подскажите, что понимается под «Экспорт исходного кода» в тарифе Business?
Экспортируется статичный html плюс все необходимые файлы (картинки, css, js). Сайт пакуется в архив и вам дается ссылка на его скачивание. Просто разархивируйте файлы и скопируйте их к себе на сервер. Вы получите сайт, который будет открываться с вашего сервера и не будет зависим от Тильды. Прочитайте инструкцию, как это сделать.

4. Что будет если я не продлю подписку?
Сайт будет снят с публикации. Данные будут храниться на Тильде в течение 6 месяцев. В любое время вы можете продлить подписку и продолжить вносить изменения в ваш проект. Если по истечении этого срока вы не продлите подписку, данные будут удалены.

5. Чем отличается сайт от страницы?
Сайт может состоять из нескольких страниц (сайт-портфолио, журнал, блог) или из одной страницы (лэндинг пейдж, лонгрид). Разница в настройках: стиль (шрифты, цвета) назначается сайту, к нему же подключается домен.

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

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

7. Что такое white label?
При оплате тарифа Personal или Business на год, в настройках сайта появляется дополнительная опция отключения лейбла «Made on Tilda», который по умолчанию установлен на всех страницах.

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

аккордеон-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 и ниже), я рекомендую обновить пакет до последней версии с новой структурой и параметрами.

51 CSS Accordions

Коллекция бесплатных HTML и CSS Accordion примеров кода: по горизонтали, по вертикали, простой, отзывчивый, анимированный и т. Д. . Обновление коллекции за март 2020 года. 14 новых примеров.

  1. Горизонтальные аккордеоны
  2. Вертикальные аккордеоны
  1. CSS Аккордеонные меню
  2. Аккордеоны для бутстрапа
  3. Аккордеоны jQuery
  4. Аккордеоны React
  5. HTML <подробности> и
    с CSS

Автор
  • Doniyor11
О коде

Адаптивный слайдер-аккордеон

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

отзывчивый: да

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

Автор
  • @keyframers
О коде

Линейная панель навигации только для CSS

Стержневые стержни.Линейная навигация только с помощью CSS.

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

отзывчивый: да

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

Автор
  • Мерт Цукурен
О коде

Эффект наведения изображения

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

отзывчивый: да

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

Автор
  • Даниэль Субат
О коде

Галерея аккордеонов

CSS-адаптивная галерея аккордеонов с анимацией масштабирования.

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

отзывчивый: да

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

Автор
  • Иван Богачев
О коде

Аккордеон на чистом CSS

Горизонтальный аккордеон на чистом CSS с эффектами transform и box-shadow .

Автор
  • Стефан К.
О коде

Галерея изображений «Аккордеон»

CSS Галерея изображений аккордеона . Меньше кода и отличный анимационный эффект.

Автор
  • fox_hover
О коде

CSS3 слайдер-гармошка с переходами и Flexbox

Аккордеон CSS3 с 5 различными эффектами.

Демонстрационное изображение: Расширение горизонтального аккордеона в React

Расширение горизонтального аккордеона в React

Быстрая альтернатива стандартному паттерну «Аккордеон», полностью построенная с помощью React.
Сделано Шоном
7 января 2017 г.

Демо-изображение: Чистый CSS Accordion

Чистый CSS Accordion

Изображение аккордеона только с CSS и цветными фильтрами с использованием функции rgba ().
Сделано Эдуардо Морено
26 ноября 2016 г.

Автор
  • Майлз Маннерс
О коде

Горизонтальная гармошка

Полная страница Горизонтальная гармошка .

Демонстрационное изображение: Адаптивный аккордеон

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

Адаптивный аккордеон (фоновые изображения).
Сделано Майклом Ферри
1 октября 2015 г.

Демонстрационное изображение: Accordion Navigation

Accordion Navigation

Ни javascript, ни flexbox.
Сделано Оливером Кноблихом
25 августа 2015 г.

Демонстрационное изображение: Flexbox Accordion

Flexbox Accordion

Простой горизонтальный аккордеон flexbox.
Сделано Арьяном Джассалом
28 декабря 2014 г.

О коде

Семантический анимированный аккордеон только для CSS

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

отзывчивый: да

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

Автор
  • Håvard Brynjulfsen
О коде

Аккордеон

Демонстрация того, что можно делать с элементами сведений и сводки.

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

отзывчивый: да

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

Автор
  • Яхим Яноусек
О коде

Встроенный элемент сведений HTML, стилизованный с помощью CSS

Реализация компонента, подобного гармошке, с использованием только встроенного HTML-элемента подробностей / сводки и CSS для стилизации.Наилучшие результаты можно увидеть в браузерах на основе Chrome или Blink. Firefox и другие тоже имеют неплохие результаты, но их можно улучшить, создав альтернативные значки открытия / закрытия.

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

отзывчивый: да

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

Автор
  • Усман Диалло
О коде

Accordion Flexbox

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

отзывчивый: да

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

Автор
  • Билал ПФ
О коде

Аккордеон с чистым CSS и HTML

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

отзывчивый: да

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

О коде

Аккордеон

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

отзывчивый: да

Зависимости: ionicons.css

Автор
  • CodiesBugs
О коде

Аккордеон без использования JavaScript

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

отзывчивый: да

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

Автор
  • Анна Блок
О коде

HTML CSS Accordion без JavaScript / jQuery

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

отзывчивый: да

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

Автор
  • Кодирующий зверь
О коде

Аккордеонное меню только с HTML и CSS

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

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Bilal.Rizwaan
О коде

Простое меню аккордеона с HTML и CSS

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

отзывчивый: да

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

О коде

Аккордеонное меню HTML Только CSS

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

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • рахул кумар райдас
О коде

Чистый HTML CSS Аккордеон

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

отзывчивый: да

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

Автор
  • Kniw Studio
О коде

Сворачивающийся аккордеон Pure CSS

Этот пример будет свернут без необходимости использования какого-либо JavaScript.

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

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Мерт Цукурен
О коде

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

Анимированный аккордеон с HTML деталями элемент.

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

отзывчивый: да

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

Автор
  • Зинг-сетка
О коде

Аккордеонный контент

Air цитирует сетку режима карты и содержимое аккордеона.

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

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

Зависимости: zinggrid.js

Автор
  • Наталья
О коде

Аккордеонные вкладки Pure SCSS

Аккордеонных вкладок без JS. Эти вкладки имеют адаптивный дизайн.

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

отзывчивый: да

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

Автор
  • Моника Уиллер
О коде

CSS Вертикальный аккордеон

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

Сделано с использованием
  • HTML / Pug
  • CSS / SCSS
  • JavaScript / Babel (Vue.js)
О коде

Аккордеоны, пожалуйста,

Вертикальный аккордеон с HTML, CSS и JS (Vue.js).

Автор
  • Хорхе Брунетто
О коде

Аккордеон с редактированием ввода

Аккордеон на чистом CSS с редактированием ввода.

Автор
  • Элиор Табека
О коде

Анимированный аккордеон CSS

Анимированный компонент сворачивания / расходования.

Автор
  • Давиде Кантелли
О коде

Аккордеон в Js

Аккордеон на ванильном JS с переходом CSS.

Автор
  • Стелиос Багларидис
О коде

Аккордеон 2.0

Вертикальная гармошка с HTML, CSS и JS.

Автор
  • Льюис Бриффа
Сделано с использованием
  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)
О коде

Аккордеон

Функциональность Accordion JS, позволяющая установить скорость анимации переключателя. У вас также есть возможность открыть только один элемент аккордеона в любой момент времени.

Автор
  • Кири Эгингтон
Сделано с использованием
  • HTML
  • CSS / SCSS
  • JavaScript (jQuery.js)
О коде

Доступный аккордеон ARIA

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

Автор
  • Кэтрин Като
О коде

FAQ Аккордеон

Minimal FAQ accordion , сделанный с небольшим количеством ванильного JavaScript.

Сделано с использованием
  • HTML
  • CSS / SCSS (Animate.css)
  • JavaScript (jQuery.js)
О коде

Базовый аккордеон

Базовый аккордеон в HTML, CSS и JS.

Демонстрационное изображение: Simple Accordion Concept

Simple Accordion Concept

HTML, CSS и JavaScript простая концепция аккордеона.
Сделано Кайл Брамм
24 марта 2017 г.

Демо-изображение: Funky Pure CSS Accordion

Funky Pure CSS Accordion

Еще одна часть пользовательского интерфейса на чистом CSS, использующая переключатели для активных состояний.
Сделано Джейми Коултером
19 марта 2017 г.

Демо-изображение: CSS Accordion

CSS Accordion

Простое решение для создания аккордеона на чистом CSS с переходом CSS по высоте панели, достигаемое установкой «max-height» панели «аккордеон» вместо «height».
Сделано Мэтью Скоттом
28 октября 2016 г.

Демонстрационное изображение: 3D Accordion

3D Accordion

Простой аккордеон с трехмерным эффектом складывания бумаги в HTML, CSS и JavaScript.
Автор Павел Таргоски
13 июня 2016 г.

Автор
  • Шехаб Эльтавель
Сделано с использованием
  • HTML
  • CSS (Bootstrap.js)
  • JavaScript (jQuery.js, Bootstrap.js)
О коде

Аккордеон в дизайне материалов — Bootstrap 3

Коллапс Bootstrap 3 переработан в соответствии с концепцией Material Design с возможностью добавления значков при отображении / скрытии с плавным переходом путем добавления активного класса в заголовок панели при отображении / скрытии.

Демонстрационное изображение: Flat Accordion

Flat Accordion

Плоский аккордеон в HTML, CSS и JavaScript.
Сделано Soufiane Abid
12 апреля 2016 г.

Демонстрационное изображение: Чистый HTML и CSS Accordion

Чистый HTML и CSS Accordion

Создал и спроектировал (в браузере) расширяемый аккордеон на чистом HTML и CSS для развлечения.
Сделано Крисом Ота
21 января 2016 г.

Демонстрационное изображение: CSS-адаптивный анимированный аккордеон

CSS-адаптивный анимированный аккордеон

HTML и CSS адаптивный анимированный аккордеон.
Сделано Крисом Райтом
19 января 2016 г.

О коде

Аккордеон на чистом CSS

Версия 2.0: переработан SCSS и плавная анимация. Добавлена ​​вкладка «закрыть» в опции «открыть одну», чтобы закрыть другую вкладку. Acordeon создан только на CSS. На основе ввода флажка + метка трюк с активными вкладками.

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

отзывчивый: да

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

Демо-изображение: Swanky Little Accordian List

Swanky Little Accordian List

Вот еще одно небольшое создание CSS с использованием уловки «Label for».
Сделано Джейми Коултером
22 февраля 2015 г.

Демонстрационное изображение: только CSS + HTML Accordion Element

CSS + HTML Only Accordion Element

Прочтите копию в разделах аккордеона, чтобы узнать, как это было сделано.
Сделано Алексом Бергином
18 апреля 2014 г.

Демонстрационное изображение: Адаптивный анимированный аккордеон SCSS

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

Адаптивный анимированный аккордеон SCSS с некоторым вырезанием фона текста и наложением линейного фона.
Сделано MrPirrera
11 декабря 2014 г.

Свернуть · Bootstrap

Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Пример

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

  • .collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • . Свернуть.показать показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется data-toggle = "collapse" .

Ссылка на href

Кнопка с целью данных

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident.

  

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident.

Несколько целей

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident.

Пример аккордеона

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

Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

  
Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, 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, крафтовый пивной труд Уэс Андерсон Кред Nesciunt Sapiente ea Proident. Объявление 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 ).

. Свернуть ('показать')

Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до показа .bs.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 () {
  // сделай что-нибудь…
})  

25 React JS Accordions

Коллекция бесплатных аккордеонов React JS : вертикальных, вложенных и т.д. Обновление коллекции за декабрь 2020 года. 3 новинки.

  1. Аккордеоны CSS
  2. Аккордеоны для бутстрапа
  3. CSS Аккордеонное меню
  4. Аккордеоны jQuery
О коде

Аккордеон

Простое приложение в стиле аккордеона, созданное с помощью React.

Автор
  • Анна Лапина
О коде

FAQ Accordion Card — React.js

FAQ по сборке карт-гармошек с React.js и хуками useState .

Автор
  • Питер Айелло
О коде

Аккордеон Custom React

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

Автор
  • Каталин Мирон
О коде

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

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

отзывчивый: да

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

Автор
  • Уджавал Чаттерджи
О коде

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

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

отзывчивый: да

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

Автор
  • DEVZONE TECH Ltd.
О коде

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

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

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

отзывчивый: да

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

Автор
  • Киран Шинде
О коде

Аккордеон React Native

Accordian в React Native.

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

отзывчивый: да

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

Автор
  • Сай Гаутам
О коде

Аккордеон React

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

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

отзывчивый: да

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

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

Простой легкий аккордеонный компонент (1.5kb minified + gzip).

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

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

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

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

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

Автор
  • Мэтью Винсент
О коде

Аккордеон — React

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

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

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

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

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

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

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

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

React collapse / гармошка.

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

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

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

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

Пример аккордеона | Авторские практики 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

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

Я видел, как некоторые люди сражались с аккордеонами в прошлом, и, ну, это было некрасиво. НО … Это вполне понятно! В аккордеоне много чего происходит, и на первый взгляд кажется, что все функции будут довольно сложно развить.

Что ж … Я здесь, чтобы доказать, что это неправильно, и я хочу помочь вам создать ваш самый лучший аккордеон на JavaScript 😄 И в этом уроке вы узнаете кучу вещей, например:

  • выбор элементов на DOM
  • для каждой петли
  • слушателей событий
  • переключение списков классов

Если вас действительно интересует только код, вот ссылка на CodePen с ним.У меня также есть видео на YouTube, если вы больше визуальный человек 👇

Итак, разобравшись со всем этим, давайте начнем этот пост 😎

Начиная с HTML

Мы начнем с создания базовой структуры HTML. И здесь все довольно просто. Вам понадобится упаковка

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

  1. контент, который всегда будет отображаться (это может быть просто

    или весь

    )
  2. a
    , который будет иметь контент, который будет свернут (он же появляется и исчезает, когда вы нажимаете 1 ).

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

Итак, теперь, когда у нас есть структура, мы можем ее построить. В моем примере ниже, как вы можете видеть, у меня есть упомянутый

, в котором все есть внутри, и это наш аккордеонный компонент , и внутри каждого у меня есть accordionTitle , который представляет контент, который всегда будет отображаться, и accordionContent — контент, который будет появляться и исчезать.Вы можете изменить используемые HTML-элементы (возможно, вы предпочтете использовать