Товаров: 0 (0р.)

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

Содержание

Аккордеон из HTML-элементов details и summary

Вы можете использовать их для создания интерактивных компонентов разворачивания и сворачивания совсем без JavaScript. Они работают во всех современных браузерах. В маргинальных браузерах, например IE, содержимое отображается полностью, поэтому пользователь всегда может получить доступ к контенту.

<details>
  <summary>Кликайте сюда</summary>
  <p>Добрый день...</p>
</details>
Кликайте сюда

Добрый день…

Ещё их можно немного стилизовать с помощью CSS, например, изменить расположение и внешний вид стрелки.

У раскрытого элемента details есть атрибут open который можно использовать для применения CSS или подмены текста в summary в разных состояниях конструкции. Этот атрибут можно использовать для раскрытого начального состояния.

<details open>
  <summary>Кликайте чтобы скрыть</summary>
  <p>По умолчанию это раскрыто...</p>
</details>
Кликайте чтобы раскрыть

По умолчанию это раскрыто…

Сборка аккордеона из HTML-элементов

details и summary

Комбинацию HTML-элементов details и summary можно использовать для интерактивного компонента «accordion».

<details>
  <summary>Посмотреть ещё</summary>
  <p>Привет!</p>
</details>

<details>
  <summary>Посмотреть ещё</summary>
  <p>Привет!</p>
</details>
Посмотреть ещё

Привет!

Посмотреть ещё

Привет!

Часто в компоненте «accordion» допускается раскрытие только одного элемента со скрытием остальных. HTML-элементы details и summary так делать не умеют.

Они возвращают событие

toggle при переключении и этим можно воспользоваться, добавив совсем немного javascript, так:

See this code details-summary-accordion on x.xhtml.ru.

How to build a progressively enhanced accordion component with vanilla JS.

flextabs-js — npm

jQuery FlexTabs Plugin

2.0.0

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

  • Два режима отображения: tabs, accordion + (accordion с одной вкладкой в качестве спойлера)
  • Адаптивный режим. Трансформация табов в аккордеон и обратно (произвольно или при заданной ширине окна браузера)
  • Поддержка тем оформления (стили темы вынесены в отдельный файл)
  • Гибкая система методов/событий для программного управления состояниями
  • Пользовательская анимация при открытии/закрытии вкладок и смене режима

Демо: Стандартный вариант | Демо: Анимация | Документация

Пакетные менеджеры:

bower install --save flextabs-js
 
npm install --save flextabs-js

Подключение:

  1. Подключить скрипты и стили:
<link rel="stylesheet" href="dist/jquery.flextabs.min.css">
 
<link rel="stylesheet" href="dist/jquery.flextabs.theme-default.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 
<script src="dist/jquery.flextabs.min.js"></script>
  1. Инициализировать плагин на группе элементов:
$('[data-ft]').flexTabs({
    
});
  1. Применить в HTML:
<div data-ft>
    <nav>
        <a href="#tab-1" class="active">Вкладка #1</a>
        <a href="#tab-2">Вкладка #2</a>
        <a href="#tab-3">Вкладка #3</a>
    </nav>
    <div>
        <div id="tab-1">Содержание вкладки #1</div>
        <div id="tab-2">Содержание вкладки #2</div>
 
        <div id="tab-3">Содержание вкладки #3</div>
    </div>
</div>

Другие варианты разметки см. Документацию

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

  • jQuery (тестировался на версии 3.3.1)

Поддержка

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

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

Лицензия (MIT)

Copyright (c) 2018-2019 Sergey Kravchenko

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

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

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

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

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

 

Если вы хотите воспользоваться готовыми решениями, тогда просмотрите предложения в нашем

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

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

Шаг 1. HTML

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

<dt>

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

</dt>

<dd aria-hidden=»true»>

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

</dd>

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

Шаг 2. CSS

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

.accordion dl,

.accordion-list {

border: 1px solid #ddd;

}

.accordion dl:after,

.accordion-list:after {

content: «»;

display: block;

height: 1em;

width: 100%;

background-color: #2ba659;

}

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

.accordion p {

padding: 1em 2em 1em 2em;

}

 

.accordion {

position: relative;

background-color: #eee;

}

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

.container {

max-width: 960px;

margin: 0 auto;

padding: 2em 0 2em 0;

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

}

})();

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

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

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

Как сделать элегантный аккордеон с JQUERY и CSS3

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

 

 

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

                                    Демо             Загрузить материалы

Начнем в первую очередь с разметки.

РАЗМЕТКА

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

<ul>
    <li>
        <div>Heading</div>
        <div></div>
        <div>
            <h3>Heading</h3>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

Остальные элементы будут иметь классы bg2, bg3 и bg4. Неупорядоченный список получает класс и id, так как мы будет в дальнейшем обращаться к нему в JavaScript.

CSS

Стили для списка будут следующими:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

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

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

Отметим, что box shadow не будет работать в IE.

Начальная ширина каждого пункта будет 115 пикселей. В JavaScript это значение будет изменено при наведении до 480px.

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

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

Теперь необходимо придать хороший вид заголовку с белым полупрозрачным фоном для каждого элемента списка при «замкнутом» состоянии аккордеона:

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

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

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Сначала установим display:none, так как мы хотим, чтоб элемент появлялся только при наведении. Вот стили других элементов:

ul.accordion li .description h3{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Стиль для градиента:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
} 

JAVASCRIPT

Во-первых, мы включаем библиотеку jQuery перед закрытием тега body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь добавим функцию, которая заставляет список раздвинуться при наведении на него мыши. Это может быть достигнуто путем увеличение ширины в 480 пикселей. При этом верхний заголовок должен исчезать и его место занимает градиент (CSS класс «bgDescription») с описанием:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Первая функция внутри «$(‘#accordion > li’).hover» срабатывает при наведении на нее курсора. Вторая функция — когда курсор отводится в сторону. Добавим некоторые временные задержки, чтобы перевод осуществлялся плавно.

Это все! Надеемся, что урок был интересным и полезным! 

Автор — MARY LOU.

Перевод — Дежурка.

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

Тест: Знаете ли вы песни Владимира Высоцкого?

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

Удачи!

  • Вопрос из

    Назовите имя телефонистки, которую так просили «Девушка, милая, я прошу продлите!».

  • Вопрос из

    Сколько негодяев вздернули на рею из за золотых дублонов?

  • Вопрос из

    Что, по утверждению Высоцкого, может быть лучше гор?

  • Вопрос из

    Как звали напарника летчика в бою двух наших самолетов против восьми.

  • Вопрос из

    С кем сыграл герой песни Высоцкого восемь партий, в преферанс, в очко и на бильярде?

  • Вопрос из

    Где зажигают вечные огни и к этому огню приносят цветы?

  • Вопрос из

    Кто пляшет в такт, нехотя и плавно?

  • Вопрос из

    Какая надпись была на заколоченных лагерных воротах?

  • Вопрос из

    Что нашел студент-археолог Федя в городе Элиста?

  • Вопрос из

    Почему черти не смогут топить свои котлы?

  • Вопрос из

    Какую сумму заработал герой песни Высоцкого на речке Ваче?

  • Вопрос из

    Что не делали Борисов и Леонов, когда были отправлены в разведку?

  • Вопрос из

    В какой песне звучит фраза «мир вашему дому»?

  • Вопрос из

    Какое «преступление» по мнению Высоцкого совершают товарищи ученые?

  • Вопрос из

    В какую передачу писали письмо пациенты Канатчиковой дачи?

  • Вопрос из

    Что визжало чертом во время сильного шторма?

  • Вопрос из

    Что сделал скалолазка с героем песни Высоцкого?

  • Вопрос из

    Высоцкий не любил, когда забывало это слово.

  • Вопрос из

    Что делал Зинин приятель с завода шин?

  • Вопрос из

    Высоцкий хотел, чтобы после его смерти за него выпили:

  • Вопрос из

    Высоцкий пел о том как «аборигены съели Кука». Потом они, конечно, переживают… А что аборигены не делают?

  • Вопрос из

    «Ой! Вань! Смотри, какие клоуны!Рот — хоть завязочки пришей…» Сколько, по мнению Вани, нужно было ткани на майку для Зины?

  • Вопрос из

    Из какой песни эти слова: «Какие странные дела у нас в России лепятся!»

  • Вопрос из

    Каких животных воспел Владимир Высоцкий, называя их привередливыми?

  • Вопрос из

    Заполни пропуск: «Еще ни холодов, ни льдин.Земля тепла. _______ .А в землю лег еще одинна Новодевичьем мужчина.»

Пройти тест еще раз

Поставьте свою оценку

Владимир Высоцкиймузыкамузыкантпевецсоветский музыкантсоветский певецсссртест

Вам могут быть интересны

Музыкальная школа «Jam Session», уроки вокала в Киеве (м.Нивки)

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

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

Синити Судзуки

Добро пожаловать в наш захватывающий мир творчества!

Подробнее о нас:

Занятия в нашем центре проходят по таким направлениям: уроки вокала для детей и взрослых, уроки гитары, фортепиано, уроки игры на барабанах, хореография, актерское мастерство и битбокс. Мы работаем во всех возрастных категориях, а так же обучение доступно как для «новичков», так и для подготовленных учеников, желающих поднять свой профессиональный уровень. Занятия уроками вокала, хореографией и игрой на музыкальных инструментах проходят в дружной, теплой и творческой атмосфере, в прекрасном городе Киеве. Преподаватель обязательно найдет особую индивидуальную методику, подходящую именно Вам. Так же у нас в центре вы можете: записать песню в студии, заказать аранжировку или написание авторской песни, удаленные PR & Booking услуги. У нас проводиться много различных музыкальных мастер-классов, семинаров, концертов школы. Еще одна часть нашей музыкальной жизни – это творческий отдых. Походы в караоке или на природу с гитарой – неотъемлемая часть нашего совместного приятного времяпровождения! Творческий музыкальный центр «Jam-Session» имеет символическое название. «Джем сейшн» — это музыкальный термин с сольфеджио, описывающий совместную импровизацию для приятного времяпровождения. Музыкальные встречи, когда музыканты собираются и играют без подготовки. Иными словами – встречи музыкантов с импровизацией в качестве отдыха. У нас очень дружеская атмосфера и сплоченный коллектив! На досуге мы не только «джемим», по выходным, на природе, или после концертов… Но и на уроках вокала тоже не соскучишься! Не стандартная программа обучения – это наш конек! Мы вкладываем душу в наших учеников и верим в них! Талант — это всего лишь треттий уровень развития задатков. Так давайте развивать его вместе:) Терпение и труд все перетрут! Всегда будем рады видеть Вас в нашем центре!

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

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

Версия

3.1.1

Установка

npm

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

  npm установить accordion-js
  
 импортный Аккордеон из 'accordion-js';
импортировать 'accordion-js / dist / accordion.min.css';
CDN

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

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

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

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

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

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

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

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

 

  

    

      

    
    

      
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 

    

  


  

    

      

    
    

      
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.

    

  


  

    

      

    
    

      
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Инициализировать модуль 
 <сценарий>
  новый Аккордеон ('. аккордеон-контейнер');

API

Примеры

Аккордеон новый (контейнер, опции)

  • контейнер — струна | HTMLElement (обязательно), селектор контейнера для гармошки
  • варианты — объект (по желанию), варианты гармошки
 // Параметры по умолчанию
новый Accordion ('.контейнер-первый ');

// Параметры пользователя
новый Accordion ('. container-second', {
  продолжительность: 400,
  showMultiple: правда,
  onOpen: function (currentElement) {
    console.log (currentElement);
  }
});

// Определить несколько аккордеонов с одинаковыми параметрами (передать массив с селекторами)
новый Accordion (['. контейнер-первый', '. контейнер-второй'], {});

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

// Отсоединить события
const accordion = новый Accordion ('.контейнер-первый ');
Accordion.detachEvents ();
Комплектация
Опция Тип Значение по умолчанию Описание
продолжительность номер 600 Продолжительность анимации в мс
ariaEnabled логическое правда Добавить элементы ARIA в структуру HTML
коллапс логическое правда Разрешить свертывание развернутой панели
показать логическое ложь Показывать несколько элементов одновременно
openOnInit массив [] Показать элементы аккордеона во время инициализации
Элемент Класс строка ‘ac’ Класс элемента
триггер Класс строка ‘триггер переменного тока’ Класс срабатывания
панель Класс строка «ac-панель» Класс панели
активный класс строка активен Класс активного элемента
до открытия функция– Вызов перед открытием позиции.
beforeOpen: (currElement) => {}
on Открыть функция– Звонит, когда элемент открыт.
onOpen: (currElement) => {}
доЗакрыть функция– Звонки перед закрытием позиции.
beforeClose: (currElement) => {}
закрыть функция– Звонит, когда элемент закрыт.
onClose: (currElement) => {}
Методы
Опция Описание Аргументы
attachEvents () Присоединить события–
detachEvents () Отключить события–
открыть () Откройте элемент аккордеона с заданным идентификатором
Например, в соотв. Открыто (1) 		idx — индекс элемента
закрыть () Закройте элемент аккордеона с заданным идентификатором
E.грамм. в соотв. Закрыть (1) 		idx — индекс элемента
переключатель () Переключить элемент аккордеона с заданным idx
Например, соотв. Переключатель (1) 		idx — индекс элемента
открыть Все () Открыть все элементы гармошки–
закрытьВсе () Закрыть все элементы гармошки–
уничтожить () Уничтожить экземпляр аккордеона:
Открыть элементы, удалить события, идентификаторы и ARIA		–

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

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

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

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

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

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

Демо Скачать

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

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

Загрузить демо

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

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

Демо Скачать

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

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

Demo Download

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

5. Отзывчивый компонент «Аккордеон и вкладки» только CSS

Демо Скачать

Еще одна вкладка на чистом CSS, которая будет автоматически преобразована в вертикальный интерфейс «аккордеон» на мобильных устройствах. На основе CSS flexbox и радио / меток.

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

Загрузить демо

Адаптивный слайдер аккордеона на чистом CSS / CSS3, который позволяет увеличивать изображение по горизонтали при наведении курсора мыши.На маленьких экранах, таких как мобильные устройства, слайдер-гармошка будет преобразован в вертикальный список изображений, чтобы соответствовать его родительскому контейнеру.

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

Демо Скачать

Создайте плавно складывающийся аккордеон, используя JavaScript, анимацию CSS3 и элементы

и .

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

Демо Скачать

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

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

Демо Скачать

Ползунок-гармошка на чистом CSS / CSS3, с помощью которого вы можете развернуть нужный слайдер до полного размера при наведении курсора мыши или касании. Адаптивный макет на основе модели Flexbox CSS3. В настоящее время поставляется с 5 причудливыми эффектами перехода.

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

Демо Загрузить

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

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

Чтобы найти больше библиотек JavaScript и / или CSS для создания интерфейсов «аккордеон» в веб-приложении, не забудьте ознакомиться с другими замечательными ресурсами:

Свернуть · Bootstrap

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

Пример

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

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

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

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

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

  
  




  

    Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

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

A

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

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

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

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

  

  

    

      

        

      
    


    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

    

  

  

    

      

        

      
    

    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

    

  

  

    

      

        

      
    

    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus Terry Richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы Occaecat Craft Beer Farm-to-Table, сырые джинсы, эстетичный синтезатор, о которых вы, вероятно, не слышали, Accusamus Labore, устойчивые VHS.

Доступность

Не забудьте добавить aria-extended к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false" . Если вы настроили открывать складной элемент по умолчанию с использованием класса show , вместо этого установите для элемента управления aria-extended = "true" .Плагин автоматически переключает этот атрибут на элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же элементу collapsbile). Если элемент HTML элемента управления не является кнопкой (например, или

), к элементу следует добавить атрибут role = "button" .

Если ваш элемент управления нацелен на единственный складной элемент — i.е. атрибут data-target указывает на селектор id — вы должны добавить атрибут aria-controls к элементу управления, содержащий id сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.

Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1.1 паттерн аккордеона — вам нужно будет включить его самостоятельно в собственный JavaScript.

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

Плагин коллапса использует несколько классов для работы с тяжелыми грузами:

  • .collapse скрывает содержимое
  • .collapse.show показывает содержимое
  • .collapsing добавляется при запуске перехода и удаляется после его завершения

Эти классы можно найти в _transitions.scss .

Через атрибуты данных

Просто добавьте data-toggle = "collapse" и data-target к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .

Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-parent = "# selector" .Обратитесь к демонстрации, чтобы увидеть это в действии.

Через JavaScript

Включить вручную с помощью:

  $ ('. Collapse'). Collapse ()

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-parent = "" .

Селектор
Имя Тип По умолчанию Описание
родитель | объект jQuery | Элемент DOM ложь Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента.(аналогично традиционному поведению аккордеона — это зависит от карты класса ). Атрибут должен быть установлен в целевой складной области.
переключатель логическое правда Переключает сворачиваемый элемент при вызове

Методы

Асинхронные методы и переходы

Все методы API асинхронные и запускают переход .Они возвращаются к вызывающему, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .

См. Нашу документацию по JavaScript для получения дополнительной информации.

. Свернуть (опции)

Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры объект .

  $ ('# myCollapsible'). Collapse ({
  toggle: false
})
.свернуть ('переключить')

Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).

.collapse ('показать')

Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до показа .bs.collapse происходит событие).

.collapse ('скрыть')

Скрывает складной элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (то есть до того, как произойдет событие hidden.bs.collapse ).

.collapse ('утилизировать')

Разрушает обрушение элемента.

События

Класс collapse

Bootstrap предоставляет несколько событий для подключения к функциональности свертывания.

Тип события Описание
show.bs.collapse Это событие возникает сразу после вызова метода экземпляра show .
показано.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.collapse Это событие запускается сразу после вызова метода hide .
hidden.bs.collapse Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})

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

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

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

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

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

Начиная с HTML

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

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

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

    или весь

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

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

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

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

alexxlab

Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт

Размеры css: Как задать ширину html страницы?

Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree

Подбор шрифтовой пары: 404-Ошибка: 404

Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук

Буквы в стиле готика: Гарнированный готический шрифт стиля, помечает буквами A Иллюстрация вектора

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *