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

На примере этого аккордеона сделана эта заметка.

Установка:

Добавляем на сайт библиотеку jQuery, CSS и JS файлы

HTML:

<div class="accordion-group">
	<h3 class="accordion-header default-open">Заголовок 1</h3>	
	<div class="accordion-body">
		<p>Текст 1</p>
		<div class="accordion-group" data-multiple="true">
		<h3 class="f20 accordion-header">Заголовок 1.1</h3>
			<div class="accordion-body">
				<p>Текст 1.1</p>
			</div>
			<h3 class="f20 accordion-header">Заголовок 1.2</h3>
			<div class="accordion-body">
				<p>Текст 1.2</p>
			</div>
			<h3 class="f20 accordion-header">Заголовок 1.3</h3>
			<div class="accordion-body">
				<p>Текст 1.3</p>
			</div> 
		</div>
	</div>
	<h3 class="accordion-header default-open">Заголовок 2</h3>
	<div class="accordion-body">
		<p>Текст 2</p>	
	</div>
	</div>

<h3 class="accordion-header default-open">Заголовок 1</h3>

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

<h3 class="f20 accordion-header">Заголовок 1.1</h3>

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

</div>

<h3 class="f20 accordion-header">Заголовок 1.2</h3>

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

</div>

<h3 class="f20 accordion-header">Заголовок 1.3</h3>

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

</div>

<h3 class="accordion-header default-open">Заголовок 2</h3>

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

</div>

Атрибут data-multiple определяет открытые вкладки (только одна или все)

CSS:

.accordion-group { 
	margin: 16px 0; 
}
.accordion-body {
	display: none;
	padding: 14px 20px;
	background: #FFF;
	border-radius: 5px;
	margin: 8px 0;
	border: 2px solid #BFE2FF;	
}
.accordion-body > * > .accordion-body {
	background: #FFF;
	margin: 0;
}
.accordion-header {
	background: #BFE2FF;
	margin: 8px 0;
	color: #000;
	padding: 8px 40px 8px 20px;
	cursor: pointer;
	border-radius: 5px;
	position: relative;
}
.accordion-header::after {
	content: "+";
	right: 16px;
	font-family: Courier;
	font-size: 28px;
	line-height: 28px;
	font-weight: bold;
	color: #337AB7;
	position: absolute;
}
.accordion-header.open {
	background: #337AB7;
	color: #fff;
	font-weight: bold
}
.accordion-header.open::after {
	content: "-";
	color: #FFF;	
}

.accordion-group {

margin: 16px 0;

}

.accordion-body {

display: none;

padding: 14px 20px;

background: #FFF;

border-radius: 5px;

margin: 8px 0;

border: 2px solid #BFE2FF;

}

.accordion-body > * > .accordion-body {

background: #FFF;

margin: 0;

}

.accordion-header {

background: #BFE2FF;

margin: 8px 0;

color: #000;

padding: 8px 40px 8px 20px;

cursor: pointer;

border-radius: 5px;

position: relative;

}

.accordion-header::after {

content: "+";

right: 16px;

font-family: Courier;

font-size: 28px;

line-height: 28px;

font-weight: bold;

color: #337AB7;

position: absolute;

}

.accordion-header.open {

background: #337AB7;

color: #fff;

font-weight: bold

}

.accordion-header.open::after {

content: "-";

color: #FFF;

}

JS:

;(function ($, window, document, undefined) {
    "use strict";
    var pluginName = 'simpleAccordion',
	defaults = {
		multiple: false,
		speedOpen: 300,
		speedClose: 150,
		easingOpen: null,
		easingClose: null,
		headClass: 'accordion-header',
		bodyClass: 'accordion-body',
		openClass: 'open',
		defaultOpenClass: 'default-open',
		cbClose: null, //function (e, $this) {},
		cbOpen: null //function (e, $this) {}
	};
    function Accordion(element, options) {
        this.$el = $(element);
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        if (typeof this.$el.data('multiple') !== 'undefined') {
            this.options.multiple = this.$el.data('multiple');
			} else {
            this.options.multiple = this._defaults.multiple;
		}
        this.init();
	}
    Accordion.prototype = {
        init: function () {
            var o = this.options,
			$headings = this.$el.children('.' + o.headClass);
            $headings.on('click', {_t:this}, this.headingClick);
            $headings.filter('.' + o.defaultOpenClass).first().click();
		},
        headingClick: function (e) {
            var $this = $(this),
			_t = e.data._t,
			o = _t.options,
			$headings = _t.$el.children('.' + o.headClass),
			$currentOpen = $headings.filter('.' + o.openClass);
            if (!$this.hasClass(o.openClass)) {
                if ($currentOpen.length && o.multiple === false) {
                    $currentOpen.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {
                        if ($.isFunction(o.cbClose)) {
                            o.cbClose(e, $currentOpen);
						}
                        $this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {
                            if ($.isFunction(o.cbOpen)) {
                                o.cbOpen(e, $this);
							}
						});
					});
					} else {
                    $this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {
                        $this.removeClass(o.defaultOpenClass);
                        if ($.isFunction(o.cbOpen)) {
                            o.cbOpen(e, $this);
						}
					});
				}
				} else {
                $this.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {
                    if ($.isFunction(o.cbClose)) {
                        o.cbClose(e, $this);
					}
				});
			}
		}
	};
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
				new Accordion(this, options));
			}
		});
	};
}(jQuery, window, document));

;(function ($, window, document, undefined) {

"use strict";

var pluginName = 'simpleAccordion',

defaults = {

multiple: false,

speedOpen: 300,

speedClose: 150,

easingOpen: null,

easingClose: null,

headClass: 'accordion-header',

bodyClass: 'accordion-body',

openClass: 'open',

defaultOpenClass: 'default-open',

cbClose: null, //function (e, $this) {},

cbOpen: null //function (e, $this) {}

};

function Accordion(element, options) {

this.$el = $(element);

this.options = $.extend({}, defaults, options);

this._defaults = defaults;

this._name = pluginName;

if (typeof this.$el.data('multiple') !== 'undefined') {

this.options.multiple = this.$el.data('multiple');

} else {

this.options.multiple = this._defaults.multiple;

}

this.init();

}

Accordion.prototype = {

init: function () {

var o = this.options,

$headings = this.$el.children('.' + o.headClass);

$headings.on('click', {_t:this}, this.headingClick);

$headings.filter('.' + o.defaultOpenClass).first().click();

headingClick: function (e) {

var $this = $(this),

_t = e.data._t,

o = _t.options,

$headings = _t.$el.children('.' + o.headClass),

$currentOpen = $headings.filter('.' + o.openClass);

if (!$this.hasClass(o.openClass)) {

if ($currentOpen.length && o.multiple === false) {

$currentOpen.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {

if ($.isFunction(o.cbClose)) {

o.cbClose(e, $currentOpen);

}

$this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {

if ($.isFunction(o.cbOpen)) {

o.cbOpen(e, $this);

}

});

} else {

$this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {

$this.removeClass(o.defaultOpenClass);

if ($.isFunction(o.cbOpen)) {

o.cbOpen(e, $this);

}

});

}

} else {

$this.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {

if ($.isFunction(o.cbClose)) {

o.cbClose(e, $this);

}

});

}

};

$.fn[pluginName] = function (options) {

return this.each(function () {

if (!$.data(this, 'plugin_' + pluginName)) {

$.data(this, 'plugin_' + pluginName,

new Accordion(this, options));

}

});

};

}(jQuery, window, document));

И подключаем скрипт:

$(function() {
	$('.accordion-group').simpleAccordion();
});

$(function() {

$('.accordion-group').simpleAccordion();

});

Настройки:

$('.accordion-group').simpleAccordion({
	
	multiple: false, // возможность открытия одной вкладки или всех
	speedOpen: 300, // скорость открытия вкладки
	speedClose: 150, // скорость закрытия вкладки
	easingOpen: null, // эффект плавности открытия вкладки
	easingClose: null, // эффект плавности закрытия вкладки
	headClass: 'accordion-header', // класс для заголовка вкладки
	bodyClass: 'accordion-body', // класс для тела вкладки
	openClass: 'open',  // класс для открытой вкладки, применяется к accordion-header
	defaultOpenClass: 'default-open', // класс для открытой вкладки по умолчанию
	cbClose: null, // callback-функция при закрытии вкладки - function (e, $this) {},
	cbOpen: null // callback-функция при открытии вкладки - function (e, $this) {}
	
});

$('.accordion-group').simpleAccordion({

multiple: false, // возможность открытия одной вкладки или всех

speedOpen: 300, // скорость открытия вкладки

speedClose: 150, // скорость закрытия вкладки

easingOpen: null, // эффект плавности открытия вкладки

easingClose: null, // эффект плавности закрытия вкладки

headClass: 'accordion-header', // класс для заголовка вкладки

bodyClass: 'accordion-body', // класс для тела вкладки

openClass: 'open', // класс для открытой вкладки, применяется к accordion-header

defaultOpenClass: 'default-open', // класс для открытой вкладки по умолчанию

cbClose: null, // callback-функция при закрытии вкладки - function (e, $this) {},

cbOpen: null // callback-функция при открытии вкладки - function (e, $this) {}

});

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 23.01.2019
Рубрики: Меню и аккордеоны
Метки: jQuery
15050 просмотров

Смотрите также:

Блочное меню со сменой фона

Меню на графическом фоне, который меняется при выборе каждого пункта

Многоуровневое вертикальное меню

Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик

Вертикальный аккордеон для фотографий

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

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

Ваш комментарий отправлен!

Михаил: 15.03.2022 в 14:55

Здравствуйте!
Отличный аккордеон, но можно ли как-то сделать так, чтобы одной определенной кнопкой открывались и закрывались все элементы аккордеона?
Буду признателен с:

Ответить
- Alexander: 17.03.2022 в 15:26
  
  На разные кнопки так:
  [b]HTML:[/b]
  [code]<button class="open-btn">Открыть все</button>
  <button class="close-btn">Закрыть все</button>[/code]
  [b]jQuery:[/b]
  [code]$('.open-btn').click(function() {
  $('.accordion-header').addClass('open');
  $('.accordion-body').css('display', 'block');
  });
  $('.close-btn').click(function() {
  $('.accordion-header').removeClass('open');
  $('.accordion-body').css('display', 'none');
  }); [/code]
  
  На одну кнопку тоже можно придумать, но там будет путаница и для пользователя, когда открыты вкладки, будет не понятно, складывать все или раскрывать.
  
  Ответить
Алексей: 08.10.2020 в 16:39

О почему анимация такая дерганная. Сначала чуть приоткрывает, а потом открывает доконца. Как сделать просто плавное раскрытие?

Ответить
- Alexander: 08.10.2020 в 18:59
  
  У меня он не притормаживает, но примерно понимаю о чем вы.
  Эти все эффекты скорее зависят от нагрузки компа или браузера.
  И соответственно от того что анатомируется.
  Развернуть 10 строчек - одно, а менять так страницы сайта - тут можно зависнуть просто и вообще ничего не откроется.
  
  Ответить
  - Алексей.: 08.10.2020 в 19:21
    
    Он не поттармаживает, видно, что это анимацией делается. Комп у меня совсем зверь, на нем ничего не подтормаживает. Большой похоже на плавность анимации, типа дельта по умолчанию какая то экзотическая
    
    Ответить
- Алексей: 26.01.2021 в 12:23
  
  Попробуйте вместо margin использовать padding
  
  Ответить
  - Алексей: 26.01.2021 в 12:25
    
    Проблему решил, виноватым было свойство *{transoition.2s}. Видимо из-за того, что глобальное.
    
    Ответить
  - Алексей: 26.01.2021 в 12:26
    
    Проблемы давно решил. Дергалось из-за глобального свойства transition. Было прописано через звездочку для всех элементов.
    
    Ответить
Сергей: 04.10.2020 в 22:17

Здравствуйте! Имею сайт одностраничный. Хочу в указанный аккордеон на каждый раздел установить юридический калькулятор . Устанавливаю скрипт на первый раздел калькулятор открывается. Добавляю скрипт на второй раздел не открывает. Подскажите пожалуйста, как это можно реализовать. С Большим к Вам уважением.

Ответить
- Alexander: 05.10.2020 в 00:39
  
  Ну тут пример не помешал бы. Какая то ошибка...
  
  Ответить
ProWeb: 19.07.2020 в 13:27

Друзья, всем привет.

Не получается в одной вкладке сделать несколько блоков с классом <div class="accordion-body">
Дублирую этот див и он просто не появляется.

Ответить
- Alexander: 19.07.2020 в 17:22
  
  А [b]accordion-header[/b] не забываете?
  Можете попробывать в вакууме на [url="https://codepen.io/atuin/pen/rNNvzpM"]codepen[/url]
  
  Ответить
Inariari: 17.03.2020 в 15:06

Спасибо за отличный аккордеон, мне кажется что для людей которые не особо понимают что и как делается и копипастят бездумно следует добавить что :
-подключаем сначала jQuerry
-копируем JS код в [*].js
-подключаем [*].js внизу страницы
-в [*].js после добавления кода аккордеона не забываем его включить строчками
[code]$(function() {
$('.accordion-group').simpleAccordion();
});[/code]
=)

Ответить
- Сергей: 23.01.2026 в 14:48
  
  Да, данный комментарий весьма полезен+ скопировал на https://codepen.io/atuin/pen/rNNvzpM код из .js и вставил в свой .js = всё сразу заработало как положено.
  
  Ответить
Dinar: 07.11.2019 в 08:30

Почему у меня не работает? =\ создаю файл html, css и js с помощью бутстрап. после этого запускаю браузер, нажимаю меню и она не открывается. Что не так? посмотрел консоль не было ошибок.

Ответить
- Alexander: 07.11.2019 в 09:23
  
  Дайте ссылку.
  Кстати у бутстрапа есть свой аккордеон же
  
  Ответить
  - Dinar: 07.11.2019 в 11:13
    
    Вот ссылка https://jsfiddle.net/k1unovrd/ это пример вам которые я создал файл html, css и js. Обратите внимание, что там прикрепил ссылка директорий setting.js - это настройка, jquery.js - подключении скрипт , test.js - у вас на статье спойлер "JS:". Далее посмотрите на результате, что оно никак не раскрывающий список. Никак.
    
    на счет бутстрапа.. Да свой, но вот только тяжело писать код для многоуровненвый и путаниц. А у вас покороче и понятнее, чем бутстрап.
    
    Ответить
    - Alexander: 07.11.2019 в 11:49
      
      То что на [b]jsfiddle [/b] у вас - у меня работает, если подключить jQuery 3, например.
      Если у вас подключена первая (версии не помню сейчас от какой до какой), например, [b]1.12.4[/b], как в вордпрессе, то возникает ошибка: [i]TypeError: $ is not a function[/i] (это из консоли)
      
      Чтобы полечить ее, замените [b]$[/b] на [b]jQuery[/b]
      
      Ответить
      - Dinar: 07.11.2019 в 11:58
        
        Странно.. как заменить $ на jQuery? прошу привести пример (не обязательно подробный исход. код)
        
        Ответить
        
        Alexander: 07.11.2019 в 12:05
        
        Автозаменой все [b]$[/b] на [b]jQuery[/b]
        
        или еще проще
        
        Код из [i]//setting.js[/i] поместите в:
        [code](function ($) {
        // код
        }(jQuery));[/code]
        А то что у вас ниже
        [code]//jquery.js
        $(function() {
        $('.accordion-group').simpleAccordion();
        });[/code]
        Это лишнее, аккордион у вас подключается в setting с настройками.
        
        Ответить
        
        Dinar: 07.11.2019 в 12:24
        
        Увы, не работает. Ладно, буду время - дольше изучу. А так спасибо за все;)
        
        Alexander: 07.11.2019 в 12:35
        
        https://codepen.io/atuin/pen/rNNvzpM
Алекс: 01.07.2019 в 01:55

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

Ответить
- Alexander: 01.07.2019 в 08:26
  
  Убрать [code]default-open[/code] у заголовка
  
  Ответить
  - Алекс: 02.07.2019 в 22:56
    
    Спасибо дружище! И спасибо за твои посты! Ты супер!
    
    Ответить
    - Alexander: 03.07.2019 в 11:21
      
      Рад был помочь, обращайтесь, если нужно 🙂
      
      Ответить

Установка:

HTML:

CSS:

JS:

Настройки:

Смотрите также:

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

Комментарии: