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

<div>

<h3>Заголовок</h3>

<div>

<a href=»#»>

Текст

<i></i>

</a>

<div>

<p>Текст</p>

</div>

</div>

<div>

<a href=»#»>

заголовок

<i></i>

</a>

<div>

<p> Текст.</p>

</div>

</div>

<div>

<a href=»#»>

Заголовок

<i></i>

</a>

</div>

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

.accordion-container{

position: relative;

width: 500px;

height: auto;

margin: 20px auto;

}

.accordion-container > h3{

text-align: center;

color: #fff;

padding-bottom: 5px;

margin-bottom: 30px;

border-bottom: 1px solid #ddd;

}

. set{

position: relative;

width: 100%;

height: auto;

background-color: #f5f5f5;

}

.set > a{

display: block;

padding: 10px 15px;

text-decoration: none;

color: #555;

font-weight: 600;

border-bottom: 1px solid #ddd;

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.set > a i{

position:relative;

float: right;

margin-top:4px;

color: #666;

}

.set > a.active{

background-color:#3399cc;

color: #fff;

}

.set > a.active i{

color: #fff;

}

.content{

position:relative;

width: 100%;

height: auto;

background-color: #fff;

border-bottom: 1px solid #ddd;

display:none;

}

.content p{

padding: 10px 15px;

margin: 0;

color: #333;

}

$(document).ready(function(){

$(«.set > a»).on(«click», function(){

if($(this).hasClass(‘active’)){

$(this).removeClass(«active»);

$(this).siblings(‘.content’).slideUp(200);

$(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»);

}else{

$(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»);

$(this).find(«i»).removeClass(«fa-plus»).addClass(«fa-minus»);

$(«.set > a»).removeClass(«active»);

$(this).addClass(«active»);

$(‘.content’).slideUp(200);

$(this).siblings(‘.content’).slideDown(200);

}

});

});

1
2
3
4
5
6
7
8
9
10
11

<div>
   <h3>Заголовок 1</h3>
   <p>Здесь находится контент…</p>
   <h3>Заголовок 2</h3>
   <p>Здесь находится контент…</h3>
   <h3>Заголовок 3</h3>
   <div>
      <p>Здесь находится контент…</p>
      <p>Здесь находится контент…</p>
   </div>
</div>

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

h3 {
color: #002850; font-size: 30px; font-weight: normal;
padding: 45px 0 15px;cursor:pointer;
}
.accordion {
border: 1px solid #ddd; border-top: none; margin: 10px 0;
float: left; width: 470px; position: relative;
}
.accordion a {
display: block; text-decoration: none;
}
.accordion h3, .accordion a{
background-color: #fff;
background-image: url(gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff);
border-top: 1px solid #ddd;
color: #222; font: 14px/30px ‘Verdana’, sans-serif;
height: 30px; margin: 0; padding: 0; text-indent: 10px;
}
p {
color: #555; font: 12px/18px ‘Verdana’, sans-serif;
padding: 20px 10px;
}

1
2
3
4
5

$(document).ready(function(){
   $(‘#accordion-js’).find(‘h3’).click(function(){
       $(this).next().stop().slideToggle();
   }).next().stop().hide();
});

1
2
3
4
5
6
7
8
9
10
11
12
13

   <a href=»#accordion-1″>Заголовок 1</a>
   <p>Здесь находится контент. =»#accordion»]+* выбираем и скрываем элемент, который идет после ссылки, атрибут href начинающийся на #accordion.

Что касается псевдокласса :target. Он используется для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, Вы наживаете на Заголовок 1, в адресную строку передается значение атрибута href и она принимает вид index.html#accordion-1, происходит переход к элементу, атрибут id которого задан как accordion-1. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Способ 3: HTML5

Разметка HTML

Я думаю, что это самый простой способ сделать аккордеон, и самый перспективный так сказать. Потому как работает только в WebKit браузерах. Думаю не стоит так просто сбрасывать со счетов HTML5, это лишь вопрос времени, ведь рано или поздно все браузеры будут на 100% поддерживать его.

Тег details используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается. А тег summary указывает заголовок для тега details, по которому можно щелкать для разворачивания/сворачивания информации. Тег summary должен идти первым внутри details.

По умолчанию браузер добавляет стрелку рядом с summary. Избавляемся от этого так:

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

P.S.: Если вы так же как и я любите веб-разработку и дизайн, и хотите постоянно совершенствоваться, то вам обязательно следует заглянуть на http://webformyself.com/minikurs/webdesign/free.html и подписаться. Уверен, что узнаете много нового, интересного и вдохновляющего. Такие знания вдвойне приятнее получать от профессионалов WebForMySelf.com.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

25+ примеров JQuery Accordion, которые можно попробовать для организации вашего сайта

Есть причина, по которой популярность аккордеонов растет с годами! Для этого более крупного и насыщенного текстом содержания простой и эффективный способ сделать его более привлекательным и менее скучным — это гармошки или складные элементы. По сути, он работает, ограничивая отображение содержимого сворачиваемыми меню, которые пользователи могут включать или отключать. Базовая структура обычно состоит из нескольких элементов, включая заголовок / заголовки и тело, которое расширяется по команде.Это чрезвычайно полезный шаблон для выделения важных деталей определенного раздела с использованием прогрессивного раскрытия информации.

Но кто сказал, что они должны быть простыми и скучными? Имея доступ к анимации и стилизации с помощью пользовательских кодов, владельцы сайтов могут работать настолько креативно или упрощенно, насколько они хотят! И если вы ищете толчок к появлению удивительных и новаторских идей, то этот список сегодня, безусловно, отличное место. Объединив все бесплатные онлайн-варианты, где вы можете почерпнуть идеи для смелых, профессионально выглядящих и потрясающих примеров, сегодня у нас есть список лучших из возможных jQuery Accordions, которые вам понравятся! Выбирая эти варианты вручную, вы получаете доступ к полной структуре кодирования.А если вас интересует больше элементов CSS, таких как карточки, кнопки, разделители и т. Д., Вы можете ознакомиться с другими нашими сообщениями в блоге.

JQuery Accordion Navigation

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

Информация / Скачать

Ручка герцога

Еще одно расширенное меню навигации, разработанное с использованием jQuery acccordion, — это перо от Duke на codepen.Это довольно визуально впечатляющий дизайн, поскольку создатель здесь абсолютно не оставил камня на камне. Каждый компонент разработан с определенной целью и анимирован — это такой плавный переход. Он имеет простое меню и яркий цвет для его представления. Даже тени добавлены, чтобы добавить еще больше реалистичности. На каждой вкладке есть значок и заголовок, а для вкладок с гармошками внутри другой значок слева. При нажатии на анимированный значок наряду с переходом он также показывает категории внутри.Категории также отображают изменение цвета фона, когда оно проявляется. В целом довольно впечатляющий подход к простой концепции меню навигации, если вы спросите нас, мы определенно думаем, что об этом стоит упомянуть здесь.

Информация / Скачать

jQuery (без пользовательского интерфейса) Accordion

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

Информация / Скачать

Аккордеон JQuery от Викаса Вермы

Начнем наш список с простого примера Викаса Вермы. Разработанный с учетом простоты и чистой эстетики, все в этом нравится пользователям.От серо-белого узора до использования упрощенных значков — это отличный способ стилизовать компоненты вашего сайта. HTML используется для определения структур, содержимого и форм, в то время как простые JS и CSS используются для добавления плавных переходов. Теперь, когда аккордеон нажимается на определенные разделы, он расширяется для отображения содержимого внутри. Маленькие детали с изменением цвета и изменением формы значка — вот что делает его таким интересным. Утонченный, но полностью ориентированный на конкретную цель, это в целом делает дизайн более профессиональным и чистым.

Информация / Скачать

Простой SASS jQuery Accordion

Что касается более сложного дизайна как такового, то это более продвинутый и стильный анимированный дизайн аккордеона jQuery. В этом дизайне, созданном Джоном Стуэбе, используются коды SASS, а также JQuery для реализации плавного перехода и размещения компонентов. В отличие от традиционного дизайна, в котором аккордеон начинается со скрытого содержимого, в этом дизайне используется эффект, подобный переключателю. Если щелкнуть один из заголовков, чтобы открыть содержимое внутри, предыдущий параметр автоматически уберется.Все в этом завораживает, поскольку создатель серьезно отнесся к тонким деталям. В зависимости от заголовка, по которому щелкнули, меню перемещается вверх или вниз, чтобы отобразить содержимое. Значки рядом с цветовой схемой выбранного заголовка также изменятся, чтобы выделить выделение. Даже тени и освещение играют роль в создании более материалистичного ощущения.

Информация / Скачать

4Line jQuery Accordion

Теперь это более минималистичный и простой дизайн jquery-аккордеона, если вы его ищете. Создатель дал всем фору, если они хотят добавить что-то свое, поскольку общий стиль и дизайн довольно просты. А вот аккордеон работает довольно плавно. И, как следует из названия, вся структура основана на 4 простых линиях, которые служат границами для каждого заголовка или содержимого. Легко реализовать и воспроизвести, если хотите, с помощью нескольких настроек здесь и там вы можете превратить это в свой собственный дизайн. Перейдите по ссылке ниже, чтобы получить доступ к их полной структуре кодирования.

Информация / Скачать

Вращающиеся стрелы

Еще один в черно-белой цветовой гамме, это более продвинутый и сложный вариант.Простой аккордеон определяется четырьмя черными прямоугольниками, каждое из которых раскрывается щелчком, чтобы открыть содержимое внутри. Но, как следует из названия, фокус здесь — вращающиеся стрелки, которые меняют свое положение при выделении. Разделы также разделены на несколько частей с разделителями между каждой точкой. В целом, дизайн остается минимальным, но в то же время современным со шрифтами, цветовыми схемами и всей структурой. Сочетая HTML, CSS и jQuery, создатель этого примера поиграл с упрощенными функциями, чтобы получить этот потрясающий вариант.

Информация / Скачать

Сексуальный аккордеон

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

Информация / Скачать

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

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

Информация / Скачать

Simple Accordion jQuery

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

Информация / Скачать

Адаптивный jQuery Accordion

Если говорить об адаптивном и креативном дизайне, это уникальная и довольно инновационная концепция.В отличие от большинства примеров в этом списке сегодня, это горизонтальный вид аккордеона. Не только это, но и сложность, дизайн и общая анимация также впечатляют. Использование различных серых, белых и синих узоров на каждой из секций делает стиль современным и резким. И если вы один из тех, кто хочет чего-то другого, то этот отзывчивый аккордеон jQuery не подходит. В отличие от классического слайда вверх и вниз, здесь используется слайд влево и вправо, меняющий направление в соответствии с нажатой вкладкой.Два простых значка навигации также размещены внизу с обеих сторон для пользователей. Маленькие детали, такие как номера страниц, заголовки, тени и источники света, используются творчески.

Информация / Скачать

3D Аккордеон

Это более интересный и впечатляющий дизайн, созданный для имитации трехмерного дизайна. И если вы предпочитаете более творческий и стильный подход, то этот вариант определенно для вас. Создатель использовал изображения в качестве разделов аккордеона, которые разворачиваются в трехмерном эффекте, чтобы раскрыть содержимое внутри.Еще одна небольшая деталь, которая делает вещи интересными, — это эффект наведения, который показывает дополнительные детали, добавленные в заголовок. Разделы с контентом также разработаны с материальным дизайном, что придает им почти реалистичное ощущение бумаги. Каждое из изображений размещается горизонтально одно над другим. Вся структура основана на CSS, HTML и JS для достижения конечного результата. Чтобы подробнее узнать об используемых кодах, перейдите по ссылке ниже.

Информация / Скачать

Супер простой аккордеон

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

Информация / Скачать

jQuery Accordion Автор Эндрю Ходжсон

Используя простоту и понятный дизайн, это еще один потрясающий вариант для реализации аккордеона jquery на вашей стороне.Хотя стиль довольно минимален, это все же отличный вариант. Зачем? Потому что каждый из разделов стилизован и анимирован до совершенства для плавного воспроизведения. Секция в рамке скользит вверх и вниз, открывая содержимое внутри. Справа значок информации также изменится на выход или поперечное сечение, что вернет всю конструкцию в ее исходное положение. С помощью некоторых настроек вы можете легко изменить шрифты, цветовые схемы и размеры, если хотите.

Информация / Скачать

Действительно просто jQuery Accordion от Джен

Еще один интересный пример — это замечательный пример jquery-аккордеона от Jen.Сохраняя его действительно простым и минимальным, это идеальный пример, демонстрирующий, как что-то настолько простое может быть таким эффективным. Черные ящики выделяются на белом фоне, и плавный переход с их размещением действительно впечатляет. Даже тексты анимированы, чтобы изменить свою цветовую схему, чтобы выделить выделение, в то время как остальной контент отображается сам. Используя HTML, CSS и немного JQuery, вы тоже можете создать тот же эффект. Просто перейдите к коду по ссылке ниже и начните работу над проектом!

Информация / Скачать

Аккордеон Майкла Хоффмана

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

Информация / Скачать

CSS JSS Многоуровневый аккордеон

Теперь для более практичного и функционального дизайна, это многоуровневый аккордеон, который означает, что он удерживает аккордеон внутри аккордеона.Простая бело-голубая цветовая палитра делает дизайн элегантным и простым. Однако многоуровневый дизайн — вот что отличает его от остальных примеров в списке. При нажатии на конкретный раздел открывается больше возможностей для раскрытия, которые также расширяются до третьего уровня аккордеона. Хотя это просто демонстрация, вы можете использовать ее на своем сайте, легко настраивая любые детали в соответствии с вашими предпочтениями. Каждый из разделов также выполняет простой эффект наведения. Еще одна уникальная особенность заключается в том, что каждое из складных меню остается неизменным независимо от того, сколько опций вы раскрываете.На наш взгляд, это отличный вариант для любых сайтов или страниц с большим количеством текста.

Информация / Скачать

Нахальный аккордеон

Красочный и привлекательный во всех смыслах, это более привлекательный дизайн, который можно добавить с помощью аккордеонов jquery на любой сайт. Если вы хотите использовать его для брендинга, рекламных или творческих целей, это отличный вариант. Кто бы мог подумать, что простой дизайн можно поднять на совершенно другой уровень, используя только несколько цветов? В дополнение к этому, различные инновационные компоненты, включая кнопку, область текста, а также значки, добавляют привлекательности.При нажатии эти разделы расширяются или сдвигаются вниз, открывая остальной контент. Используя HTML, CSS и немного JS, конечный результат, безусловно, стоит попробовать.

Информация / Скачать

Простой jQuery Accordion от Виктора Диаса де Леона

Еще один стиль Виктора Диаса де Леона под простой и элегантной нишей аккордеона. Коробки, основанные на материальном дизайне, анимированы таким образом, что выглядят потрясающе. Серовато-белый на красном фоне также очень хорошо сочетается.Используя CSS и JS, каждый из разделов выполняет потрясающее движение аккордеона и переход. Все факторы стиля, включая цветовые схемы, используемые шрифты и даже шаблоны, предварительно определены. Однако вы можете сделать этот дизайн своим и добавить собственные детали с небольшими изменениями здесь и там.

Информация / Скачать

Переключатель аккордеона

Использование стиля переключения с аккордеоном — еще один отличный способ добавить аккордеон на ваш сайт. Элегантный и чистый дизайн, сине-белая цветовая гамма делает его еще более привлекательным.Дизайн в стиле переключателя расширяется за счет эффекта плавного выдвижения, открывая содержимое внутри. Шрифты и общие факторы стилизации сведены к минимуму, чтобы сосредоточиться на отображаемом контенте. И в отличие от большинства примеров в нашем списке, здесь используется простая структура из 4 строк, а не прямоугольников.

Информация / Скачать

Легкий аккордеон

Еще один более креативный аккордеон — супер простой, но стильный jquery-аккордеон от Расмуса Биля Ларсена. Контрастный цвет с черным на желтом делает его более стильным и ретро.Каждая вкладка аккордеона представлена ​​отдельными полями, содержащими содержимое внутри. При щелчке по нему остальная часть содержимого становится плавным слайдом. Вращающиеся значки с правой стороны также добавляют привлекательности. Принимая во внимание мельчайшие детали, дизайн также основан на материальном каркасе, что придает ему более реалистичный вид.

Информация / Скачать

Горизонтальный аккордеон Easy CSS jQuery

Если вертикальные гармошки вам не подходят, то этот пример — отличный вариант для вас. Уникальная концепция в сочетании с инновационными элементами дизайна позволила создать привлекательный внешний вид. Каждая вкладка «аккордеон» различается по цвету, всего используется 5 цветов. И в отличие от традиционного аккордеона, этот дизайн имеет наклон в сторону горизонтального движения. Он в основном действует, скользя в и из поля зрения в зависимости от нажатой вкладки. При открытии содержимое затем переключается на вертикальный вид, чтобы соответствовать просмотру пользователей. Использование CSS, HTML и JS, хотя это и сложно сделать с первого раза, все же стоит попробовать, если вы хотите выделиться.

Информация / Скачать

Аккордеон и поиск

Для более эффективного и действенного использования, это объединенная версия панели поиска и гармошки в одну. Сохраняя весь формат чистым и минимальным, стиль более целенаправлен. Строка поиска помещается сверху для облегчения навигации, а аккордеон впоследствии помещается под полосой. Даже аккордеон тоже многоуровневый, а это значит, что внутри него есть аккордеон. Разделы, представленные прямоугольниками, расширяются, показывая ссылки, такие как раздел, который расширяется, чтобы раскрыть содержимое внутри.Панель поиска также одинаково функциональна, и пользователи могут использовать ее, чтобы легко найти заголовок, который они ищут.

Информация / Скачать

Простой JQuery Accordion с неограниченным вложением

Если вы хотите что-то более минималистичное и простое, то это еще один отличный способ реализовать на своем сайте аккордеон jQuery. Вся конструкция визуально чистая и элегантная. С рядом кнопок-переключателей, которые расширяются при нажатии, чтобы отобразить содержимое внутри, это довольно простой дизайн.Разделы содержимого предназначены для простого скольжения вниз и работают как традиционный переключатель. Это означает, что одновременно может отображаться только одна категория. Кнопки также имеют легкий намек на эффект наведения с легким переходом цвета. Замечательно то, что шаблон также довольно отзывчивый и реагирует в соответствии с размером экрана устройств, которые используют ваши пользователи.

Информация / Скачать

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

Теперь это более творческое использование концепции аккордеона jQuery, которая в итоге становится привлекательным элементом.Основанный на горизонтальном слайдере, создатель использовал в качестве основы потрясающе выглядящие изображения. На первый взгляд, это, по сути, последовательность изображений, показывающая лишь беглый взгляд на каждое из них. Однако при наведении курсора эти слайды расширяются, чтобы пользователи могли увидеть полные изображения. Каждый отличается эффектом слайда в зависимости от его положения. Внутри каждого слайда можно добавить дополнительное содержимое, будь то заголовок или описание. Замечательно то, что этот шаблон полностью адаптивен, что означает, что он легко автоматически подстраивается под размер экрана любого устройства.

Информация / Скачать

Аккордеон Material Design

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

Информация / Скачать

JQuery Accordion от Elen

На очереди еще один минималистичный и упрощенный подход к дизайну аккордеона jQuery. Это базовая конструкция с чистым движением и простым дизайном. Даже использование цветовых схем сведено к минимуму, а общий вид выглядит профессионально.Как и любой другой аккордеон, при нажатии на любую из вкладок он открывает содержимое внутри, удобно расположенное в соответствии с вашими потребностями. Поскольку он основан на структуре кода HTML, CSS и JS, вы можете сделать еще один шаг и настроить детали по своему вкусу. Вы можете легко ознакомиться со структурой, перейдя по ссылке внизу. Еще одна тонкая деталь — это плавная отзывчивость, которую он предлагает. В общем, отличный способ начать добавлять креативные элементы на ваш сайт, это отличное дополнение к нашему списку.

Информация / Скачать

Аккордеон со стрелкой JQuery

И последнее, но не менее важное: у нас есть эксклюзивный дизайн от Нико. Профессионально выглядящий современный дизайн в сочетании с двумя уникальными аккордеонами. Создателю удалось добавить этот творческий талант к каждому из этих дизайнов, которые смутно отличаются своим собственным чувством интересного стиля. Оба они также полностью отзывчивы. Верхняя — это простая вкладка «аккордеон», при нажатии на которую отображается содержимое внутри.Здесь реализована тонкая анимация на значке стрелки в правой части вкладки. Наряду с этим вы также заметите изменение цветовой схемы при наведении и нажатии.

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

Информация / Скачать

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

 
          

            

              

                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseOne"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseOne"
                >
                  Аккордеонный предмет # 1
                
              
              

                

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

              

                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseTwo"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseTwo"
                >
                  Аккордеонный предмет # 2
                
              
              

                

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

              

                кнопка <
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseThree"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseThree"
                >
                  Аккордеонный предмет # 3
                
              
              

                

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

jquery пример формы гармошки

О КОМПАНИИ. Используйте его для сегментирования длинных форм и контента или для постепенного раскрытия информации. Сегодня я собираюсь дать вам простой пример кода аккордеона usign jquery ui. Затем используйте JavaScript, чтобы сдвинуть содержимое вниз, установив рассчитанную максимальную высоту в зависимости от высоты панели на экранах разных размеров: Сертификаты. Пользовательский интерфейс jQuery — это тщательно подобранный набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе библиотеки jQuery JavaScript.1. Это связано с тем, что пользователям сначала нужно пройти через шаги, чтобы найти свое поле, отредактировать и пройти все шаги, чтобы снова сохранить. Аккордеон Bootstrap — это компонент, который организует контент в сворачиваемых элементах. Аккордеоны могут быть очень полезны для отображения множества различных разделов данных на небольшом пространстве. Здесь Мудассар Ахмед Хан объяснил на примере, как использовать плагин jQuery Accordion в ASP.Net. Я использую шрифт Genericons для значков социальных сетей. Как использовать JqueryUI Accordion с Asp.Сеть? Применение. Щелкните правой кнопкой мыши проект «Добавить», «Добавить новый элемент», затем назовите веб-форму как… Обновление коллекции за октябрь 2019 года. Accordions API. Бесплатный горизонтальный аккордеон на чистом CSS. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Меню навигации веб-сайта играет важную роль в удобстве использования и удобстве использования. Как избежать отправки формы при нажатии на заголовок Начните свой код здесь Свертываемый элемент группы № 1Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.Подкаст блога Overflow 267: Метрика — это волшебство, микро-интерфейсы и разрыв аренды в Silicon… Гамбургер-слайд-меню с jQuery. widget () Он определяет элемент виджета «аккордеон» с помощью объекта jQuery. Аккордеонные формы, как правило, менее удобны при обновлении существующих данных, например, при использовании в качестве формы CRUD. Если вы создаете интерактивные веб-приложения или вам просто нужно добавить средство выбора даты в элемент управления формы, пользовательский интерфейс jQuery — идеальный выбор. jQuery UI имеет встроенную функцию Accordion, но согласно jQuery UI Build your Download, размер Core jQuery UI и скриптов Accordion составляет 25 КБ и 16.6kb, соответственно. Сегодня я покажу вам, как создать собственный аккордеон, который будет более «эффективно использовать полосу пропускания». В следующем примере я буду создавать всплывающие подсказки с помощью плагина всплывающей подсказки пользовательского интерфейса jQuery, который будет использовать обычную всплывающую подсказку в теге. HTML CSS JavaScript Python SQL PHP И многое другое. Примеры меню аккордеона jquery — Трехрядный кнопочный аккордеон Barcelona с трехрядным кнопочным гармошкой в ​​жестком футляре — Черный Трехрядный кнопочный аккордеон Barcelona с 31 кнопкой и 12 кнопками баса / аккорда идеально подходит для начинающих или музыкантов среднего уровня в поисках… Аккордеоны есть… Примеры jQuery. Адаптивный и готовый к работе с устройствами, с множеством опций для настройки, которые легко могут быть частью ваших проектов. Сортировка Просмотрите другие вопросы с метками jquery-ui accordion jquery jquery-ui-accordion или задайте свой вопрос. По этой причине я включил режим редактирования, который загрузит форму с развернутыми шагами. Вы можете создавать переносимые списки, элементы с изменяемым размером, поведение перетаскивания и многое другое с помощью всего нескольких строк кода. Yetii — Еще (E) Еще один интерфейс вкладок JavaScript. Этот метод позволяет использовать аккордеон i.е. В этой статье объясняется, как создавать вертикальные навигационные меню без jquery или javascript. Мои входные данные HTML 5 выглядят по-разному на разных устройствах и в браузерах. По умолчанию аккордеон будет скользить вниз и вверх. Анимации. Здесь не нужно хорошо разбираться в коде, чтобы его стилизовать и добавить анимацию. Демонстрация JQuery Accordion с одной открытой / расширенной панелью. Сегодняшний ресурс представляет собой удобное аккордеонное меню с поддержкой групп / подпунктов. Как использовать JqueryUI Accordion с Asp.Net? Клавиша Enter для открытия / закрытия текущей панели аккордеона.Встроенные демонстрации могут не отображаться на мобильном устройстве идеально, поэтому лучше просмотреть этот пост на рабочем столе или открыть их отдельно. Form Accordion — это плагин jQuery для простого скрытия и отображения связанных полей формы по условию. Нет: Да: Когда вы хотите переехать? Шаг 1 из 3 * Обязательное поле. Разметка. Аккордеон в jQuery помогает скрывать и показывать большой контент. Файл, Новый, затем Веб-сайт. Создан проект веб-сайта ASP.NET с именем JqueryTab. Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari Accordion позволяет отображать только один свернутый элемент за раз.Используя параметр сворачиваемости как истинный, вы можете открывать и закрывать панель, щелкая по ней. jQueryUI pro Он работает только с CSS, используя селектор псевдокласса: checked на элементах ввода флажков. Перевод jQuery в бесконфликтный режим; Основная идея состоит в том, чтобы развернуть фрагменты аккордеона, когда вы нажимаете на опцию, а также… Как сделать простой аккордеон с помощью CSS. widget () Он определяет элемент виджета «аккордеон» с помощью объекта jQuery. Горизонтальный аккордеон, похожий на Xbox, который выглядел бы действительно… Учебное пособие по Bootstrap — Поместите форму в Accordion.Аккордеоны могут быть очень полезны для отображения множества различных разделов данных на небольшом пространстве. При каждом нажатии кнопки (с идентификатором, установленным на «удалить») текущая выбранная группа будет удалена, а аккордеон обновит свой макет. Существует множество плагинов для аккордеона, но я хотел, чтобы пользователь (клиент) мог создать действительно простой плагин из одного редактора WYSIWYG вместо создания большого количества полей в указанной CMS. Чтобы создать анимированный аккордеон, добавьте в класс панели max-height: 0, overflow: hidden и переход для свойства max-height.Аккордеонные формы, как правило, менее удобны при обновлении существующих данных, например, при использовании в качестве формы CRUD. Полностью анимированные действия открытия-закрытия с использованием встроенной анимации CSS3 с умным автоматическим откатом к анимации jQuery для старых браузеров. Полностью анимированные действия открытия-закрытия с использованием встроенных анимаций CSS3 с интеллектуальным автоматическим откатом к анимации jQuery для старых браузеров. Сворачиваемые наборы начинаются с той же разметки, что и отдельные сворачиваемые элементы, у которых есть заголовок, за которым следует сворачиваемое содержимое. Пример-12: Метод Accordion () в jQuery. Аккордеон создается в jQuery Mobile путем группирования серии отдельных складных элементов в набор. Используйте его, чтобы показать / скрыть содержимое карты. Без меню навигация по сайту практически бесполезна. В этой демонстрации показано, как можно динамически добавлять складной набор в складной набор (аккордеон). Он предоставляет различные скины, опции и функции для организации данных. Откройте папку проекта jquery-webpart в Visual Studio Code. В приведенном ниже примере вы можете видеть, что мы использовали функцию Accordion с некоторыми стилями CSS-ссылок.Bootstrap 4 Collapse Пример Bootstrap 4 Collapse используется, когда вы хотите показать или скрыть большой объем содержимого в зависимости от того, как пользователь щелкнул ссылку. Взаимодействия добавляют базовое поведение на основе мыши к любому элементу. Droppable 3. Примеры использования Bootstrap Accordion: Страница часто задаваемых вопросов Горизонтальный jQuery Accordion в стиле Xbox 360. Взаимодействия также являются отличными строительными блоками для более сложных виджетов и приложений. Зависимости: material-design-iconic-font.css. Эту форму можно быстро и легко заполнить — всего за 3 шага! Веб-сайты — это лучшая сфера для воплощения впечатляющих идей, а также для приятного веб-контента простым и довольно дешевым подходом, позволяющего сделать их доступными для всего мира, чтобы они были открыты и к ним можно было привыкнуть.Этот метод включает работу аккордеона, т.е. расскажите нам о недвижимости, которую вы покупаете. В настоящее время вы работаете с агентом по недвижимости? В следующем примере показано, как удалить текущую выбранную группу. Простой плагин jQuery Accordion, который имеет возможность раскрывать все / открывать по одному и может быть полностью настроен с помощью CSS. Вы никогда не можете недооценивать использование аккордеона jQuery. a11yAccordion — это расширенный, доступный, фильтруемый, настраиваемый плагин jQuery accordion для расширения и сжатия содержимого на веб-странице. . Примеры меню JQuery Accordion Culicid Nico переместил некоторые огамы после того, как сильно урезал ценовой эксплойт.

алгоритмов для жизни по правилу Байеса, 2-х конфорочный гриль из нержавеющей стали, Преимущества решений бизнес-аналитики и бизнес-аналитики в розничной торговле, Bostitch Cordless 18 Gauge Брэд Нейлер, Семейство шрифтов Didot, Силуэт ошибки для печати, Интересные факты об африканских диких собаках,

Свернуть · Bootstrap

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

Как это работает

Плагин JavaScript сворачивания используется для отображения и скрытия содержимого. Кнопки или якоря используются как триггеры, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента приведет к анимации высоты от текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, вы не можете использовать заполнение в элементе . collapse . Вместо этого используйте класс как независимый элемент оболочки.

Пример

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

• .свернуть скрывает содержимое
• . Свертывание применяется во время переходов
• .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, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident.

  

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


  

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

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

A или может отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора JQuery в своем атрибуте href или data-target . Множественные или могут отображать и скрывать элемент, если каждый из них ссылается на него со своим атрибутом href или data-target

Переключить первый элемент Переключить второй элемент Переключить оба элемента

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

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

  

   Переключить первый элемент 
  

Переключить второй элемент Переключить оба элемента

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

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

Пример «Аккордеон»

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

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, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident. Объявление 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, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident. Объявление 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, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.

  

  

    

      

        
          Разборная группа №1
        
      
    

    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident.  Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
    
  
  

    

      

        
          Элемент складной группы №2
        
      
    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит nesciunt sapiente ea proident.  Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
    
  
  

    

      

        
          Элемент складной группы № 3
        
      
    
    

      

        Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит 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 для применения коллапса. Обязательно добавьте к складному элементу свернутый элемент класса . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс 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 () {
  // сделай что-нибудь…
})  

jquery плагин для аккордеона

Скрипты

Accordion немного похожи на ползунки контента, но часто посетителям нужно выполнить действие, чтобы получить доступ к различным элементам контента.. Бесплатный легкий плагин jQuery Accordion. Будьте первым, кто оставит комментарий Оставить комментарий Отменить ответ. 19 апреля 2019 г. Asif Mughal Accordion 0. Но это… Я настроил аккордеон для правильной работы, затем я создал функцию, которая добавляет «элемент списка» к аккордеону, который соответствует семантике аккордеона. Вкладки доступны в трех вариантах: горизонтальном, вертикальном и «гармошке». Поделиться: Ваш адрес электронной почты не будет опубликован. Имя * Электронная почта * Веб-сайт. Учебник по созданию простого и красивого аккордеона с помощью jQuery и CSS.Легкий, современный и простой в использовании плагин jQuery Accordion, который позволяет создавать аккордеон с возможностью раскрывать все или открывать по одному при событии щелчка. Предварительный просмотр плагина. Плагины jQuery с меткой «аккордеон», плагины jQuery для аккордеона. То, как обычно создаются аккордеоны, делает их великолепными… Как бы вы это ни называли, это довольно аккуратно и настраивается с использованием прямых параметров и атрибутов HTML5 data- *. jQuery Accordion, плагины jQuery. Комментарий. liteAccordion — это облегченный плагин горизонтального аккордеона для jQuery • Концепция Akordeon состоит в том, чтобы предложить легкий и настраиваемый интерфейс для складных панелей, которые могут сохранять любые знания в закрытом помещении.Затем я хочу, чтобы пользователь мог добавить больше данных в аккордеон. Я использую плагин jQuery accordion, чтобы собрать некоторые данные. jQuery Accordion может быть полезен при разработке меню, слайд-шоу, слайдеров контента, боковых панелей и многого другого, мощность jquery Accordions нельзя недооценивать, jQuery Accordions поможет вам отображать важную информацию на ваших веб-сайтах и ​​сделать ваши веб-сайты визуально потрясающими. Его размер в сжатом виде составляет всего ~ 1 КБ. Akordeon — это стильный плагин jQuery для включения экологичного модного меню аккордеона на онлайн-страницу.Navgoco — это простой плагин JQuery, который превращает вложенный неупорядоченный список ссылок в красивую вертикальную многоуровневую навигацию по слайдам с возможностью сохранения расширенных подменю между сеансами с помощью файлов cookie и, при необходимости, в качестве аккордеона. ZAccordion — плагин горизонтального аккордеона для jQuery. TurboTabs — это гибкий плагин jQuery, который можно легко настроить, используя некоторые из доступных опций. Создайте вложенный аккордеон с помощью плагина jQuery BeefUp; Предыдущий. В этой статье мы собрали 15 лучших плагинов jQuery Accordion — Вертикальное меню на чистом CSS с подменю — Меню Accordion. Как объяснялось, я понимаю, что мне не следует использовать для этого аккордеон, но мой вопрос в том, возможно ли это поверх существующего компонента jQuery UI Accordion. jQuery zAccordion поставляется с файлами JavaScript (свернутыми и несвернутыми), а также некоторыми примерами. Бесплатные плагины jQuery Accordion 1. zAccordion. Следующий. Было бы одно дело, если бы ваш относительно большой объем jQuery создавал такой же аккордеон, что и пользовательский интерфейс jQuery (одновременно открыта только одна панель и т. Д.) 9 Замечательных подключаемых модулей jQuery Accordion от Генри — 03.08.2019 Если вы хотите представить различные разделы данных на небольшом пространстве, чтобы они были приятны для глаз читателя и не перегружены дополнительной информацией, то плагин jQuery Accordin может быть невероятно полезным. 2. световой аккордеон. С помощью подключаемых модулей jQuery accordion вы можете взаимодействовать со своими посетителями и в то же время упростить использование вашего контента. Разметку HTML очень просто реализовать. Сделайте два div одинаковой высоты с помощью jQuery. Плагин jQuery Accordion Расширять все / Открывать по одному. Привет, jQueryians, только что улучшили и зафиксировали плагин аккордеона jQuery или, скорее, «виджет аккордеона».

Независимая от платформы противоположная сторона, Чили Время сейчас, Голубая полосатая хрюкающая добыча, Шаблон резюме ученого медицинской лаборатории, Разница между отправленным и доставленным текстом, Рейтинг архитектуры Ucla, Calystegia Sepium Общее название, Венский салат с запеченной фасолью, Недвижимость на берегу реки Нуэсес на продажу, Журнал изменений Emacs 27,

Schascha / BeefUp: Просто плагин jQuery для аккордеона

Просто плагин jQuery accordion

https://schascha.github.io/BeefUp/

Примеры:

Установка

Вы можете использовать BeefUp в своем проекте, установив его с помощью npm:

 npm install beefup --save 

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

1. Включить jQuery

    <скрипт src = "dist / js / jquery. min.js ">  

2. Включить плагин

3. Добавить стили

4. Добавить разметку

    <статья>
        
    Заголовок 
    
       
    Мое необычное разборное содержимое. 
    

5. Вызов плагина

    <сценарий>
       $ (function () {
           $ ('.beefup '). beefup ();
       });
    

Конфигурация

Опция	Тип	По умолчанию	Описание
доступность	логический	правда	Включить специальные возможности, такие как управление вкладками
спусковой крючок	строка	‘.beefup__head’	Селектор спускового элемента
содержание	строка	‘. beefup__body ‘	Селектор сворачиваемого содержимого
openClass	строка	«открыто»	Имя класса, который показывает, активирован ли аккордеон
анимация	строка	‘слайд’	Установить тип анимации «слайд», «исчезновение» или оставить пустым «»
openSpeed ​​	целое число	200	Установить скорость открытой анимации
закрытьСкорость	целое число	200	Установить скорость анимации закрытия
свиток	логический	ложь	Выделить аккордеон на открытии
scrollSpeed ​​	целое число	400	Установить скорость анимации прокрутки
scrollOffset	целое число	0	Дополнительное смещение к позиции гармошки
открытыйОдинарный	логический	ложь	Открывать сразу только один аккордеон
stayOpen	смешанный	null	Оставить элементы открытыми, принимает значение NULL, целое число (индекс) или строку (селектор, «первый» или «последний»)
самоблок	логический	ложь	Блокировать событие закрытия при нажатии
самозакрытие	логический	ложь	Закрывание гармошки при нажатии снаружи
хеш	логический	правда	Открытый аккордеон с идентификатором при изменении хэша
точки останова	массив	null	Массив объектов, см. Пример
onInit	функция	null	Обратный вызов: запускается после первоначальной настройки аккордеонов
onOpen	функция	null	Обратный вызов: запускается после первоначальной настройки аккордеонов
on Закрыть	функция	null	Обратный вызов: запускается после первоначальной настройки аккордеонов
на скролле	функция	null	Обратный вызов: запускается после первоначальной настройки аккордеонов

Продвинутый

Методы API

 var $ beefup = $ ('.beefup '). beefup (); 

Открыть

 $ beefup.open ($ ('# beefupID')); 

Закрыть

 $ beefup.close ($ ('# beefupID')); 

Нажмите

 $ beefup.click ($ ('# beefupID')); 

Свиток

 $ beefup.scroll ($ ('# beefupID')); 

Обратный звонок

 $ ('.  Beefup'). Beefup ({
    onInit: function ($ this) {
        // Что-то делаем после первоначальной настройки
    },
    onOpen: function ($ this) {
        // Делаем что-нибудь после того, как аккордеон откроем контент
    },
    onClose: function ($ this) {
        // Что-то делаем после того, как аккордеон закрывает содержимое
    },
    onScroll: function ($ this) {
        // Что-то делаем после анимации прокрутки
    }
}); 

Атрибуты данных HTML5

 

    ...
 

Ошибки?

Дайте мне знать: https://github.com/Schascha/BeefUp/issues

☕ ​​Купи мне кофе

Поддержите этот и другие проекты через PayPal. Спасибо

История изменений

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

Лицензия

MIT

Copyright (c) 2014-настоящее время Sascha Künstler

Пример JQuery и jQuery Mobile Collapsible Accordion

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

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

Просмотр демонстраций и кода для

Просмотрите различные компоненты и демонстрации близко

Демонстрация складной панели JQuery.Используйте его для сегментирования длинных форм, делая группы полей расширяемыми / сворачиваемыми. Для jQuery или jQuery Mobile.

Демонстрация JQuery Accordion с одной открытой / расширенной панелью. Используйте это, чтобы пользователи могли сосредоточиться на одном фрагменте контента за раз. Для jQuery или jQuery Mobile.

Пример JQuery Collapsible cards.Используйте его, чтобы показать / скрыть содержимое карты. Развернуть и свернуть при щелчке по заголовку карточки. Для jQuery или jQuery Mobile.

Ищете то, чего не видели, или у вас есть вопрос о продаже?
Спросите нас об этом, мы здесь, чтобы помочь.

Спроси нас о чем угодно

Настройте и попробуйте демонстрации локально

Войдите или начните пользоваться бесплатной пробной версией

Какой фреймворк вы используете?

Javascript

jQuery

AngularJS

Угловой

Реагировать

Другое

Установите демо в свое приложение

Следуйте этому быстрому двухминутному руководству по установке

Закрыть окно

Установите демо в свое приложение

Следуйте этому быстрому двухминутному руководству по установке

Закрыть окно

Настройте и попробуйте демонстрации локально

Как бы вы хотели это сделать?

Установите демо в свое приложение

Следуйте этому быстрому двухминутному руководству по установке

Закрыть окно

Спасибо за скачивание

Попробовать и настроить приложение локально

Распакуйте zip-файл и запустите проект, как любое приложение Ionic. Убедитесь, что у вас установлен Ionic CLI, и откройте терминал в корневой папке приложения.

Шаг 1. Запуск в корневой папке

  $ npm установить  

Шаг 2. Запустите приложение.

  $ ионная подача  

Сообщите нам, если мы сможем помочь и получить удовольствие!

Спасибо за скачивание

Локальная настройка демонстраций

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

Извлеките zip-файл и просто откройте демонстрационные версии в своем любимом браузере. Инструкции по установке Mobiscroll в вашем проекте следуйте этому руководству.

Сообщите нам, если мы можем помочь и получить удовольствие! 👍

Спасибо за скачивание

Локальная настройка демонстраций

Извлеките zip-файл и запустите проект, как любое приложение Angular CLI.Убедитесь, что у вас установлен Angular CLI.

Для установки и использования распакуйте zip-файл, откройте окно терминала и выполните следующие действия.

Шаг 1. Запуск в корневой папке

  $ npm установить  

Шаг 2. Запустите приложение.

  $ нг порция - открыть  

Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

Спасибо за скачивание

Локальная настройка демонстраций

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

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

Самый простой способ начать — следовать инструкциям по установке и захват кода прямо с демонстрационной страницы. Сообщите нам, если мы сможем помочь и получить удовольствие! 👍

В zip-файле вы найдете полнофункциональное приложение Kitchen-Wink Ionic.

Спасибо за скачивание

Локальная настройка демонстраций

Демонстрации используют встроенный в браузер Babel преобразователь ES6 и JSX.

Распакуйте zip-файл и откройте демонстрационные версии в своем браузере.
Инструкции по установке Mobiscroll в вашем проекте следуйте этому руководству.

Сообщите нам, если мы можем помочь и получить удовольствие!

Настройте и попробуйте эту демонстрацию локально

Войдите или начните пользоваться бесплатной пробной версией

Измените пароль

Необходимо обновить пароль? Войдите и нажмите кнопку под

Измените пароль

Необходимо обновить пароль? Войдите и нажмите кнопку под

Ваш пароль изменен!

.

No related posts.

alexxlab