Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>JavaScript - Как создать аккордион</title> <style> body { margin: 50px; } .accordion-item { margin-bottom: 1px; } .accordion-item:last-child { margin-bottom: 0; } .accordion-item-header { padding: 10px 10px 10px 20px; background: #4d5159; color: rgba(255, 255, 255, .8); cursor: pointer; text-transform: uppercase; font-family: sans-serif; position: relative; } .accordion-item.show .accordion-item-header, .accordion-item-header:hover, .accordion-item-header:focus { background: #3b3e44; } .accordion-item-header::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 10px; background: rgba(255, 255, 255, .5); } .accordion-item-content { display: none; } .accordion-item.show .accordion-item-content { display: block; } .accordion-subitems { list-style-type: none; margin: 0; padding: 0; } .accordion-subitem>a { padding: 10px 10px 10px 20px; background: #ebeaec; color: #333; cursor: pointer; text-transform: uppercase; font-family: sans-serif; position: relative; margin-top: 1px; display: block; text-decoration: none; } .accordion-subitem>a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 10px; background: rgba(255, 255, 255, .5); } .accordion-subitem.active>a { background: #d4d3d5; pointer-events: none; } .accordion-subitem a:hover, .accordion-subitem a:focus { background: #d4d3d5; } .accordion-item-header-count { position: absolute; top: 50%; right: 10px; width: 24px; height: 24px; transform: translateY(-50%); text-align: center; background: rgba(255, 255, 255, .8); color: #000; line-height: 24px; border-radius: 12px; } </style> </head> <body> <div style="display: flex;"> <div style="flex: 0 0 50%; max-width: 50%;"> <div id="accordion-1" class="accordion" style="max-width: 400px; margin: 0 auto;"> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 1 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 1.1</a> </li> <li class="accordion-subitem active"> <a href="#">Пункт 1.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 1.3</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 1.4</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 1.5</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 2 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 2.1</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 2.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 2.3</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 2.4</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 3 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 3.1</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.3</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.4</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.5</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.6</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 3.7</a> </li> </ul> </div> </div> </div> </div> <div style="flex: 0 0 50%; max-width: 50%;"> <div id="accordion-2" class="accordion" style="max-width: 400px; margin: 0 auto;"> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 4 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 4.1</a> </li> <li class="accordion-subitem active"> <a href="#">Пункт 4.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 4.3</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 5 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 5.1</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.3</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.4</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.5</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.6</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.7</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 5.8</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Заголовок 6 </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Пункт 6.1</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 6.2</a> </li> <li class="accordion-subitem"> <a href="#">Пункт 6.3</a> </li> </ul> </div> </div> </div> </div> </div> <script> 'use strict'; var Accordion = function (selector) { var _selector = selector, _mainElement = document.querySelector(selector), _items = _mainElement.querySelectorAll('.accordion-item'); this.getMainElement = function () { return _mainElement; }; this.getItems = function () { return _items; }; this.getItem = function (elements, className) { // функция для получения элемента с указанным классом var element = undefined; elements.forEach(function (item) { if (item.classList.contains(className)) { element = item; } }); return element; }; }; Accordion.prototype = function () { var _addItemHeaderCount = function (_this) { // количество подпунктов в пункте console.log(_this); var headers = _this.getMainElement().querySelectorAll('.accordion-item-header'); headers.forEach(function (header) { var countElement = document.createElement('div'); countElement.className = 'accordion-item-header-count'; countElement.textContent = header.parentElement.querySelectorAll('.accordion-subitem').length; header.appendChild(countElement); }); }; var _actionClick = function (e, _this) { if (!e.target.classList.contains('accordion-item-header')) { // прекращаем выполнение функции если кликнули не по заголовку return; } e.preventDefault(); // Отменям стандартное действие // получаем необходимые данные var header = e.target, item = header.parentElement, itemActive = _this.getItem(_this.getItems(), 'show'); if (itemActive === undefined) { // добавляем класс show к элементу (в зависимости от выбранного заголовка) item.classList.add('show'); } else { // удаляем класс show у ткущего элемента itemActive.classList.remove('show'); // если следующая вкладка не равна активной if (itemActive !== item) { // добавляем класс show к элементу (в зависимости от выбранного заголовка) item.classList.add('show'); } } }; var _setupListeners = function (_this) { // добавим к элементу аккордиона обработчик события click _this.getMainElement().addEventListener('click', function(e) { _actionClick(e, _this); }); }; var _init = function () { _addItemHeaderCount(this); _setupListeners(this); }; return { init: _init } }(); var accordion1 = new Accordion('#accordion-1'); accordion1.init(); var accordion2 = new Accordion('#accordion-2'); accordion2.init(); </script> </body> </html>