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.

Paula

10 Сен 2020 в 22:38

2 ответа

Лучший ответ

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

Неверный родительский ID
Дополнительный класс .hide, который предотвращает отображение складных
Несколько элементов с одинаковым идентификатором, например #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 />. Это напортачило с плагином аккордеона.

David Liang
10 Сен 2020 в 22:47

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

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

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

VDWWD
10 Сен 2020 в 20:39

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

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

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

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

Шаг 1. HTML

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

<dt>

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

</dt>

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

</dd>

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

Шаг 2. CSS

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

.accordion dl,

.accordion-list {

border: 1px solid #ddd;

}

.accordion dl:after,

.accordion-list:after {

content: «»;

display: block;

height: 1em;

width: 100%;

background-color: #2ba659;

}

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

.accordion p {

padding: 1em 2em 1em 2em;

}

.accordion {

position: relative;

background-color: #eee;

}

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

.container {

max-width: 960px;

margin: 0 auto;

padding: 2em 0 2em 0;

}

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

.accordionTitle,

.accordion__Heading {

background-color: #38cc70;

text-align: center;

font-weight: 700;

padding: 2em;

display: block;

text-decoration: none;

color: #fff;

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

border-bottom: 1px solid #30bb64;

}

.accordionTitle:before,

.accordion__Heading:before {

content: «+»;

font-size: 1.5em;

line-height: 0.5em;

float: left;

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

transition: transform 0.3s ease-in-out;

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

}

.accordionTitle:hover,

.accordion__Heading:hover {

background-color: #2ba659;

}

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

.accordionTitleActive,

.accordionTitle.is-expanded {

background-color: #2ba659;

}

.accordionTitleActive:before,

.accordionTitle.is-expanded:before {

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

transform: rotate(-225deg);

}

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

Шаг 3. JS

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

(function(){

var d = document,

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

setAria,

setAccordionAria,

switchAccordion,

touchSupported = (‘ontouchstart’ in window),

pointerSupported = (‘pointerdown’ in window);

skipClickDelay = function(e){

e.preventDefault();

e.target.click();

}

setAriaAttr = function(el, ariaType, newProperty){

el.setAttribute(ariaType, newProperty);

};

setAccordionAria = function(el1, el2, expanded){

switch(expanded) {

case «true»:

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

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

break;

case «false»:

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

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

break;

default:

break;

}

};

//функции

switchAccordion = function(e) {

console.log(«triggered»);

e.preventDefault();

var thisAnswer = e.target.parentNode.nextElementSibling;

var thisQuestion = e.target;

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

setAccordionAria(thisQuestion, thisAnswer, ‘true’);

} else {

setAccordionAria(thisQuestion, thisAnswer, ‘false’);

}

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

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

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

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

thisAnswer.classList.toggle(‘animateIn’);

};

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

if(touchSupported) {

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

}

if(pointerSupported){

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

}

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

}

})();

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

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

Меню «Аккордеон» без javascript и изображений – 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 новых примеров.

Горизонтальные аккордеоны
Вертикальные аккордеоны

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

с CSS

Автор

Doniyor11
30 августа 2020

О коде

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

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

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

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

Автор

@keyframers
21 августа 2019

О коде

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

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

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

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

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

Автор

Мерт Цукурен
7 марта 2019

О коде

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

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

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

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

Автор

Даниэль Субат
23 января 2019

О коде

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

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

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

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

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

Автор

Иван Богачев
6 июня 2018

О коде

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

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

Автор

Стефан К.
11 января 2018

О коде

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

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

Автор

fox_hover
27 ноября 2017 г.

О коде

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

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

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

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

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

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

Чистый CSS Accordion

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

Автор

Майлз Маннерс
19 июля 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
16 февраля 2021

О коде

Аккордеон

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

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

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

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

Автор

Яхим Яноусек
12 января 2021

О коде

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

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

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

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

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

Автор

Усман Диалло
25 сентября 2020

О коде

Accordion Flexbox

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

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

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

Автор

Билал ПФ
12 сентября 2020

О коде

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

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

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

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

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

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

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

Автор

рахул кумар райдас
28 апреля 2020

О коде

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

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

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

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

Автор

Kniw Studio
17 сентября 2019

О коде

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

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

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

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

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

Автор

Мерт Цукурен
17 марта 2019

О коде

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

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

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

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

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

Автор

Зинг-сетка
28 декабря 2018

О коде

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

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

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

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

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

Автор

Наталья
25 сентября 2018

О коде

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

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

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

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

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

Автор

Моника Уиллер
15 мая 2018

О коде

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

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

Сделано с использованием

HTML / Pug
CSS / SCSS
JavaScript / Babel (Vue.js)

О коде

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

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

Автор

Хорхе Брунетто
7 ноября 2017 г.

О коде

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

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

Автор

Элиор Табека
3 ноября 2017 г.

О коде

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

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

Автор

Давиде Кантелли
26 октября 2017 г.

О коде

Аккордеон в Js

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

Автор

Стелиос Багларидис
25 августа 2017 г.

О коде

Аккордеон 2.0

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

Автор

Льюис Бриффа
14 августа 2017 г.

Сделано с использованием

HTML
CSS (Ionicons.css)
JavaScript (jQuery.js)

О коде

Аккордеон

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

Автор

Кири Эгингтон
13 июля 2017 г.

Сделано с использованием

HTML
CSS / SCSS
JavaScript (jQuery.js)

О коде

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

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

Автор

Кэтрин Като
12 июля 2017

О коде

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

Автор

Шехаб Эльтавель
27 мая 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.

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

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

О коде

Аккордеон

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

Автор

Анна Лапина
12 февраля 2021

О коде

FAQ Accordion Card — React.js

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

Автор

Питер Айелло
4 февраля 2021

О коде

Аккордеон Custom React

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

Автор

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

О коде

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

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

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

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

Автор

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

О коде

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

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

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

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

Автор

DEVZONE TECH Ltd.
31 мая 2019

О коде

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

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

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

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

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

Автор

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

О коде

Аккордеон React Native

Accordian в React Native.

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

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

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

Автор

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

О коде

Аккордеон React

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

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

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

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

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

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

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

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

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

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

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

Автор

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

О коде

Аккордеон — React

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

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

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

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

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

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

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

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

React 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. И здесь все довольно просто. Вам понадобится упаковка

 , которая будет удерживать ваш аккордеонный компонент  , а внутри у вас будут разные элементы аккордеона  . Внутри каждого предмета   вы захотите иметь две вещи:
 контент, который всегда будет отображаться (это может быть просто   или весь 
 )
 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  я получал выделенный текст, и я этого не хотел, поэтому я решил удалить его с помощью пользовательского выбора, и, поскольку я хотел, чтобы пользователь знал, что этот элемент доступен для щелчка, я изменил курсор, который появляется при наведении на него указателя. Вот и все.
 Значение  .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 🤘
 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 
 Демо Загрузить
 Небольшой ванильный плагин 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.Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
Навигация по записям
Previous PostКак в саи нарисовать губы: Как рисовать губы — SAI Paint Tool по русски
Next PostВ доте пинг большой: Пинг в Доте 2 — как уменьшить высокий пинг Dota 2 ✅ включить ФПС (FPS) и пинг в игре

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

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

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

css

js

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

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

2 ответа

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

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

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

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

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

Разметка HTML

Основные CSS

CSS3 Transition

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

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

Версия

Установка

npm

CDN

Github

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

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

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

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

API

Примеры

Комплектация

Методы

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

51 CSS Accordions

Автор

О коде

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

Автор

О коде

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

Автор

О коде

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

Автор

О коде

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

Автор

О коде

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

Автор

О коде

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

Автор

О коде

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

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

Чистый CSS Accordion

Автор

О коде

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

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

Accordion Navigation

Flexbox Accordion

О коде

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

Автор

О коде

Аккордеон

Автор

О коде

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

Автор

О коде

Accordion Flexbox

Автор

О коде

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

О коде