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

Александр Мальцев

05.06.2021

19K

Содержание:

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

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

создания HTML разметки;
описания его внешнего вида с помощью CSS;
написания логики на JavaScript.

Дизайн аккордеона (скриншот):

Аккордеон, заголовки которого отделены друг от друга

HTML код аккордеона и его описание

HTML-разметка аккордеона:

<div id="accordion" class="accordion">
  <div class="accordion-item show">
    <div class="accordion-item-header">
      Заголовок 1
    </div>
    <div class="accordion-item-content">
      Контент 1...
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Заголовок 2
    </div>
    <div class="accordion-item-content">
      Контент 2...
    </div>
  </div>
  ...
</div>

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show. Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Стили аккордеона:

.accordion-item-header {
  padding: 10px 15px;
  background: #ed5565;
  color: #fff;
  cursor: pointer;
}
.accordion-item-content {
  background: #383838;
  color: #fff;
  display: none;
}
.accordion-item.show .accordion-item-content {
  padding: 10px 15px;
  display: block;
}
.accordion-item.show .accordion-item-header {
  background: #da4453;
  color: #fff;
}

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content, т.е. содержимого.

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show, который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

var accordion = (function (element) {
  var _getItem = function (elements, className) { // функция для получения элемента с указанным классом
    var element = undefined;
    elements.forEach(function (item) {
      if (item.classList.contains(className)) {
        element = item;
      }
    });
    return element;
  };
  return function () {
    var _mainElement = {}, // .accordion
      _items = {}, // .accordion-item
      _contents = {}; // .accordion-item-content
    var _actionClick = function (e) {
      if (!e.target.classList.contains('accordion-item-header')) { // прекращаем выполнение функции если кликнули не по заголовку
        return;
      }
      e.preventDefault(); // отменям стандартное действие
      // получаем необходимые данные
      var header = e.target,
        item = header.parentElement,
        itemActive = _getItem(_items, 'show');
      if (itemActive === undefined) { // добавляем класс show к элементу (в зависимости от выбранного заголовка)
        item.classList.add('show');
      } else {
        // удаляем класс show у ткущего элемента
        itemActive.classList.remove('show');
        // если следующая вкладка не равна активной
        if (itemActive !== item) {
          // добавляем класс show к элементу (в зависимости от выбранного заголовка)
          item.classList.add('show');
        }
      }
    },
    _setupListeners = function () {
      // добавим к элементу аккордиона обработчик события click
      _mainElement.addEventListener('click', _actionClick);
    };

    return {
      init: function (element) {
        _mainElement = (typeof element === 'string' ? document.querySelector(element) : element);
        _items = _mainElement.querySelectorAll('.accordion-item');
        _setupListeners();
      }
    }
  }
})();

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

// инициализируем элемент с id="accordion" как аккордеон
var accordion1 = accordion();
accordion1.init('#accordion');

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу (margin-bottom):

.accordion-item {
  margin-bottom: .25rem;
}
.accordion-item:last-child {
  margin-bottom: 0;
}

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Аккордеон на JavaScript с анимацией появления

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

  .accordion {
    border-bottom: 1px solid #ddd;
  }
  .accordion-item {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  .accordion-item-header {
    padding: 10px 15px;
    background: #a4b4bf;
    color: #fff;
    cursor: pointer;
  }
  .accordion-item-content {
    background: #fff;
    transition: opacity .4s ease;
    visibility: hidden;
    height: 0;
    opacity: 0;
  }
  .accordion-item.show .accordion-item-content {
    padding: 10px 15px;
    visibility: visible;
    height: auto;
    opacity: 1;
  }
  .accordion-item.show .accordion-item-header {
    background: #3498db;
    color: #fff;
    border-bottom: 1px solid #ddd;
  }

Вертикальное меню аккордеон

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

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

CSS и JavaScript:

<style>
/* CSS */
.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>

<!-- HTML -->
<div id="accordion" class="accordion">
  <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>
        ...
      </ul>
    </div>
  </div>
  ...
</div>

<script>
// JavaScript
var accordion = (function (element) {
  var _getItem = function (elements, className) { // функция для получения элемента с указанным классом
    var element = undefined;
    elements.forEach(function (item) {
      if (item.classList.contains(className)) {
        element = item;
      }
    });
    return element;
  };
  return function () {
    var _mainElement = {}, // .accordion
      _items = {}, // .accordion-item
      _contents = {}; // .accordion-item-content
    var _addItemHeaderCount = function () {
      // количество подпунктов в пункте
      var headers = _mainElement.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);
      });
    },
      _actionClick = function (e) {
        if (!e.target.classList.contains('accordion-item-header')) { // прекращаем выполнение функции если кликнули не по заголовку
          return;
        }
        e.preventDefault(); // отменям стандартное действие
        // получаем необходимые данные
        var header = e.target,
          item = header.parentElement,
          itemActive = _getItem(_items, 'show');

        if (itemActive === undefined) { // добавляем класс show к элементу (в зависимости от выбранного заголовка)
          item.classList.add('show');
        } else {
          // удаляем класс show у ткущего элемента
          itemActive.classList.remove('show');
          // если следующая вкладка не равна активной
          if (itemActive !== item) {
            // добавляем класс show к элементу (в зависимости от выбранного заголовка)
            item.classList.add('show');
          }
        }
      },
      _setupListeners = function () {
        // добавим к элементу аккордиона обработчик события click
        _mainElement.addEventListener('click', _actionClick);
    };
    return {
      init: function (element) {
        _mainElement = (typeof element === 'string' ? document.querySelector(element) : element);
        _items = _mainElement.querySelectorAll('.accordion-item');
        _addItemHeaderCount();
        _setupListeners();
      }
    }
  }
})();

var accordion1 = accordion();
accordion1.init('#accordion');

</script>

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

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

<style>
  .accordion {
    padding-left: 0;
  }

  .accordion-item {
    margin-bottom: 2px;
  }
  .accordion-item:last-child {
    margin-bottom: 0;
  }

  .accordion-item-header {
    padding: 10px 15px 10px 35px;
    background: #2e7d32;
    color: #fff;
    cursor: pointer;
    position: relative;
  }

  .accordion-item-header::before {
    display: inline-block;
    content: "";
    position: absolute;
    border-top: 8px solid currentColor;
    border-right: 8px solid transparent;
    border-bottom: 0;
    border-left: 8px solid transparent;
    top: 50%;
    margin-top: -4px;
    left: 12px;
  }

  .accordion-item-header::after {
    display: inline-block;
    content: "";
    position: absolute;
    border-top: 8px solid #2e7d32;
    border-right: 8px solid transparent;
    border-bottom: 0;
    border-left: 8px solid transparent;
    top: 50%;
    margin-top: -6px;
    left: 12px;
  }

  .accordion-item-content {
    background: #dcedc8;
    color: #1b5e20;
    display: none;
    list-style-type: none;
  }

  .accordion-item.show > .accordion-item-content {
    padding: 10px 15px;
    display: block;
  }

  .accordion-item.show > ul.accordion-item-content {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    background: #fff;
  }

  .accordion-item.show > .accordion-item-header {
    background: #4caf50;
    color: #fff;
    margin-bottom: 2px;
  }

  .accordion-item.show > .accordion-item-header::before {
    transform: rotate(-90deg);
  }

  .accordion-item.show > .accordion-item-header::after {
    transform: rotate(-90deg);
    margin-top: -4px;
    left: 10px;
    border-top-color: #4caf50;
  }

  .accordion-item-header:focus,
  .accordion-item-header:hover,
  .accordion-item.show > .accordion-item-header:focus,
  .accordion-item.show > .accordion-item-header:hover {
    background: #1B5E20;
  }

  .accordion-item-header:focus::after,
  .accordion-item-header:hover::after,
  .accordion-item.show > .accordion-item-header:focus::before,
  .accordion-item.show > .accordion-item-header:hover::after {
    border-top-color: #1B5E20;
  }
</style>

...
<ul id="accordion" class="accordion" style="max-width: 400px; margin: 0 auto;">
  <li class="accordion-item show">
    <div class="accordion-item-header">
      Заголовок 1
    </div>
    <ul class="accordion-item-content">
      <li class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 1.1
        </div>
        <div class="accordion-item-content" style="height: 200px;">
          Контент 1.1...
        </div>
      </li>
      <li class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 1.2
        </div>
        <div class="accordion-item-content" style="height: 200px;">
          Контент 1.2...
        </div>
      </li>
      <li class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 1.3
        </div>
        <div class="accordion-item-content" style="height: 200px;">
          Контент 1.3...
        </div>
      </li>
    </ul>
  </li>
  <li class="accordion-item">
    <div class="accordion-item-header">
      Заголовок 2
    </div>
    <div class="accordion-item-content" style="height: 200px;">
      Контент 2...
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-item-header">
      Заголовок 3
    </div>
    <div class="accordion-item-content" style="height: 200px;">
      Контент 3...
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-item-header">
      Заголовок 4
    </div>
    <ul class="accordion-item-content">
      <li class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 4.1
        </div>
        <div class="accordion-item-content" style="height: 200px;">
          Контент 4.1...
        </div>
      </li>
      <li class="accordion-item">
        <div class="accordion-item-header">
          Заголовок 4.2
        </div>
        <div class="accordion-item-content" style="height: 200px;">
          Контент 4.2...
        </div>
      </li>
    </ul>
  </li>
</ul>

<script>
  var accordion = (function (element) {

    var _getActiveItems = function (elements) { // функция для получения элементов с указанным классом
      var items = [];
      elements.forEach(function (item) {
        if (item.classList.contains('show')) {
          items.push(item);
        }
      });
      return items;
    };

    return function () {
      var _mainElement = {}, // .accordion
        _items = {}, // .accordion-item
        _contents = {}; // .accordion-item-content


      var _actionClick = function (e) {
        if (!e.target.classList.contains('accordion-item-header')) { // прекращаем выполнение функции если кликнули не по заголовку
          return;
        }
        e.preventDefault();   // Отменям стандартное действие
        // получаем необходимые данные
        var header = e.target,
          item = header.parentElement,
          activeItems = _getActiveItems(_items);

        if (!activeItems.length) { // добавляем класс show к элементу (в зависимости от выбранного заголовка)
          item.classList.add('show');
        } else {
          // удаляем класс show
          activeItems.forEach(function (activeItem) {
            if (!activeItem.contains(item)) {
              activeItem.classList.remove('show');
            }
          });
          item.classList.toggle('show');
        }
      },
        _setupListeners = function () {
          // добавим к элементу аккордиона обработчик события click
          _mainElement.addEventListener('click', _actionClick);
        };

      return {
        init: function (element) {
          _mainElement = (typeof element === 'string' ? document.querySelector(element) : element);
          _items = _mainElement.querySelectorAll('.accordion-item');
          _setupListeners();
        }
      }

    }
  })();


  var accordion1 = accordion();
  accordion1.init('#accordion');

</script>

Вадим

19 февраля 2021, 12:13

Добрый день! Отличное Многоуровневое вертикальное меню аккордеон (зелёное),
единственный недостаток — Инициализация элемента как аккордеон к каждому экземпляру var accordion2 = accordion(); accordion2.init('#accordion-2');
Если возможно — допишите универсальный код.
Антон

21 ноября 2020, 01:33

Александр, доброго времени суток! Помогите пожалуйста в решении данной проблемы… Без Вас никак.
1) Есть аккордеон меню взятое с вашего сайта codepen.io/man129/pen/MWeLdwz пункты в нем получились достаточно длинными (10 Пунктов) itchief.ru/assets/uploadify/7/8/4/784dc229800b3f940e7dfda4ec9967b3.jpg и при просмотре этого меню например с телефона, меню занимает большую часть экрана.И если для главной страницы (index.html) можно и нужно все так оставить, то для других это не подходит т.к много контента.) Можно ли сделать чтобы за место этих пунктов при просмотре с телефона, была например одна кнопка «Меню» по центру, при клике на которую открывалось само МЕНЮ? (например вот так itchief.ru/assets/uploadify/c/3/2/c327dec0545f4779e4aeb8a9b7fc1b8a.jpg)? Либо есть какой-нибудь другой, простой и эффективный способ? Не понимаю как это реализовать…
Спасибо Вам!)
1. Александр Мальцев
  
  25 ноября 2020, 16:16
  Привет!
  Эту задачу можно решить так (открыть пример):
```
<style>
/* по умолчанию аккордеон меню скрываем */
#accordion {
  display: none;
}
/* по умолчанию отображаем аккордеон меню только, когда у кнопки с помощью которой её переключаем имеется класс show
#nav-toggle.show~#accordion {
  display: block;
}
@media (min-width: 992px) {
  /* включаем отображение только на больших экранах */
  #accordion {
    display: block;
  }
  /* кнопку для переключения меню на больших экранах не показываем */
  #nav-toggle {
    display: none;
  }
}
</style>


<button type="button" id="nav-toggle">Меню</button>

<nav id="accordion" class="accordion">...</div>

<script>
// скрипт, который будет переключать класс show при нажатии на кнопку #nav-toggle
document.querySelector('#nav-toggle').onclick = function () {
  this.classList.toggle('show');
};
</script>
```
  1. Антон
    
    20 марта 2021, 01:47
    
    Александр, приветствую! Еще раз огромное Спасибо за помощь с аккордеоном! Меню очень нравиться)
    codepen.io/itchief/pen/xxEKJVy
    Но, в очередной раз возник вопрос, реально ли в этом примере сделать так, чтобы для главной страницы меню не сворачивалось в одну кнопку «Меню», а оставалось раскрытым, а для других оставить так как есть (в свернутом варианте). Ни как не могу придумать как это реализовать в вашем примере. Может вы сможете помочь — показать, как это реализовать с минимальным ущербом?
    1. Александр Мальцев
      
      20 марта 2021, 14:51
      
      Привет!
      Если можно, то просто добавьте класс show на главной странице:
      
      <div class="accordion-item show">
      Если у вас шаблон одинаковый и просто добавить класс не получится, то тогда можно так:
      
      if (location.pathname === '/') { document.querySelector('#accordion .accordion-item::first-child').classList.add('open'); }
      1. Антон
        
        20 марта 2021, 17:12
        
        Александр, действительно, если добавить div все раскрывается, но мой косяк что плохо объяснил…
        Задача для главной страницы сделать так (другие оставить без изменения), чтобы на крупных разрешениях меню осталось неизменным, а именно таким ( itchief.ru/assets/uploadify/9/f/b/9fbecc7cc846489633ed0758426c423c.jpg ). А при мобильном просмотре (с 991px) в данный момент оно такое ( itchief.ru/assets/uploadify/3/5/f/35f31ea58e7759ccab86db51bf71fc34.jpg ) т.е есть кнопка «Меню» и оно свернуто. Сделать так чтобы были видны пункты, а именно -> itchief.ru/assets/uploadify/9/7/6/9761921b0c950ce250657d1b095bac04.jpg.
        
        P.S Как вы и сказали добавил div, но все пункты стали развернуты на большых экранах ( itchief.ru/assets/uploadify/1/4/2/1422517978099d46f983adf007d0a70a.jpg ) и не изменными на маленьких ( itchief.ru/assets/uploadify/3/5/f/35f31ea58e7759ccab86db51bf71fc34.jpg ). Добавлял таким способом: Просто обернув все меню в div class=«accordion-item show».
        
        <div class="container main"> <div class="row"> <div class="col col__aside"> <div class="accordion-item show"> <button type="button" id="nav-toggle"> Меню </button> <nav id="accordion" class="accordion"> <div class="accordion-item show"> <div class="accordion-item-header"> Пункт one </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Подпункт one</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт two</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт three</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт four</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Пункт two </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Подпункт one</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт two</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт three</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт four</a> </li> </ul> </div> </div> <div class="accordion-item"> <div class="accordion-item-header"> Пункт three </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Подпункт one</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт two</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт three</a> </li> <li class="accordion-subitem"> <a href="#">Подпункт four</a> </li> </ul> </div> </div> </nav> </div> </div>
        Java код вообще не сработал… По идее просто вставил его в конце кода и тишина. В меню я ни чего не менял, все как вы мне подсказали так и оставил. По факту как у вас на codepen.io/itchief/pen/xxEKJVy так и у меня.
        Если возможно это реализовать очень прошу помогите!) Заранее Благодарю! =)
        
        Александр Мальцев
        
        22 марта 2021, 02:18
        
        Тогда нужно просто добавить класс show к кнопке (codepen.io/itchief/pen/xxEKJVy):
        
        <button type="button" id="nav-toggle" class="show">
        
        Антон
        
        22 марта 2021, 03:05
        
        Александр, как всегда все решили одной строчкой гениально и просто, я же начинал куралесить.
        Уже практически рад, что так работает, но чтобы вообще классно было, можете подсказать, сильно ли тяжело будет эту кнопку «Меню убрать», либо же сделать ее не активной для главной страницы? Если вам будет не тяжело сможете показать?
        Реально, очень мне помагаете, Спасибо вам за это!)
        itchief.ru/assets/uploadify/2/a/6/2a661f525b1b0792143efcc985d8f34e.jpg
        
        Александр Мальцев
        
        22 марта 2021, 14:36
        
        Пожалуйста!
        Можно просто добавить в стили главной страницы:
        
        #nav-toggle { display: none !important; }
        
        Антон
        
        22 марта 2021, 15:05
        
        Александр, при добавлении таким образом действительно все работает! Но, подскажите в данном случае правильно ли то, что css-свойства я добавляю в саму страницу? Правильно ли это? Смущает то, что при просмотре кода страницы, на многих других сайтах, я практически ни где не встречал такого. Возможно ли эти свойства задать в отдельном документе? (css, js), либо это сложно и не стоит того и самый действенный способ добавления в саму нужную страницу? т.е как в варианте ниже) Thank!
        
        <body> <style type="text/css"> #nav-toggle { display: none !important; } </style> <header class="container header"> <div> <a href="index.html"><img src="#" alt="Описание"></a> </div> </header> <div class="container main"> <div class="row"> <div class="col col__aside"> <button type="button" id="nav-toggle" class="show"> Меню </button> <nav id="accordion" class="accordion"> <div class="accordion-item"> <div class="accordion-item-header"> Пункт one </div> <div class="accordion-item-content"> <ul class="accordion-subitems"> <li class="accordion-subitem"> <a href="#">Подпункт one</a> </li> </ul> </div> </div>
        
        Александр Мальцев
        
        24 марта 2021, 15:08
        
        Если не хотите непосредственно вставлять стили на страницу, то просто добавьте для главной страницы какой-то опознавательный признак, например, добавьте класс main-page элементу body:
        
        <body class="main-page">
        После этого в CSS уже можно вставлять стили, которые будут применяться для главной страницы, т.к. на других такого класса нет:
        
        .main-page #nav-toggle { display: none !important; }
        
        Антон
        
        24 марта 2021, 23:02
        
        Точно! Спасибо!)
  2. Антон
    
    25 ноября 2020, 16:28
    
    Александр, огромное — преогромное Вам Спасибо! Сэнсэй 1 словом!)
2. Николай
  
  24 ноября 2020, 16:40
  
  Привет! Меня тоже интересует этот момент.Вы нашли решение?
  1. Антон
    
    24 ноября 2020, 19:48
    
    Приветствую! Нет, не разобрался…
Антон

10 ноября 2020, 13:02

Александр, приветствую! Спасибо за статью! Но, не могли бы вы показать, или написать, отдельную статью как реализовать с помощью этого меню. Меню бургер, к примеру же из вашей статьи про флексы itchief.ru/html-and-css/layout-with-css-flexbox. Думаю было бы многим интересно. Спасибо!
1. Александр Мальцев
  
  11 ноября 2020, 04:02
  
  Привет! Пожалуйста! Спасибо за идею, напишу в ближайшее время.
  1. Антон
    
    11 ноября 2020, 14:28
    
    ок!) Спасибо, буду ждать!)
Антон

07 октября 2020, 17:39

Александр, подскажите пожалуйста, за что отвечает этот код в вашей таблице, т.к этот класс в html я не обнаружил, а любые изменения с этим кодом никаких последствий для таблицы не несет. Заранее Благодарю!
.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;
1. Александр Мальцев
  
  08 октября 2020, 13:08
  
  Это стили для оформления элемента, который используется для вывода цифр в круге. Если вы эти данные не используете, то тогда они не нужны.
Антон

04 октября 2020, 14:51

Александр, добрый день! Вы не подскажите как в этом меню убрать счетчик подпунктов и к примеру за место них добавить стрелки вниз?
1. Александр Мальцев
  
  05 октября 2020, 14:28
  
  Привет! Можно сделать так: открыть пример.
  1. Антон
    
    05 октября 2020, 22:51
    
    Александр, в очередной раз спасибо! Я уже догадываюсь, что достал Вас. Но нет выхода и в очередной раз прошу помощи, у меня почему-то не работает выпадающий список в этом меню codepen.io/man129/pen/YzWKZBw. Я убил уже целый день на решение этой проблемы, так и не разобрался… Не могли бы помочь исправить эту проблему?)
    1. Александр Мальцев
      
      08 октября 2020, 12:58
      
      Пожалуйста! Почему? Рад, что могу быть полезным.
      Вы просто забыли html код аккордеона обернуть в элемент:
      
      <div id="accordion" class="accordion">...</div>
      Ссылка: codepen.io/itchief/pen/VwjwNEO
      1. Антон
        
        08 октября 2020, 14:04
        
        Огромное человеческое Спасибо за помощь! Но, я пока думал, решил эту проблему немножко по другому.Просто добавил id к классу col__aside, ну и в java коде изменил accordion на col__aside.Как вы думаете такое изменение с точки зрения написания кода правильно? Или лучше переделать как подсказали?) Ниже ссылка на переданный код, если не трудно взгляните хотя бы мельком) Спасибо!
        codepen.io/man129/pen/YzWKZBw
        
        Александр Мальцев
        
        08 октября 2020, 14:13
        
        Пожалуйста! Не стал бы смешивать. В col__aside можно поместить не только меню в виде аккордеона, но и другие элементы.
        
        Антон
        
        08 октября 2020, 20:32
        
        Забыл написать что делал по такому сценарию: Вырезал меню со всех страниц, за место меню написал: <?php include('../../nav.php')?>, а дальше все как описано ниже… Все это сработает если будет все находится в 1 месте т.е рядом с index и nav.php, но как я и говорил там много подпунктов меню и много файлов…
        
        Александр Мальцев
        
        10 октября 2020, 06:37
        
        Если хотите строить через абсолютные пути к файлам, то используйте $_SERVER['DOCUMENT_ROOT'].
        На сайте имеется статья про абсолютный путь в PHP. Изучите её внимательно, и у вас всё получится.
        
        Антон
        
        08 октября 2020, 19:42
        
        Александр, вопрос немного не по теме этого раздела, но я не нашел соответствующей темы… Если что потом удалю этот комментарий…
        Подскажите как можно решить эту проблему, пытаюсь создать многостраничный сайт, в нем постоянно на всех страницах будет одинаковое меню и и подвал.Собственно чтобы не вносить изменения в меню на каждой странице решил познакомиться с php. и так возникла проблема.)
        Как сделать так, чтобы php работал, в случае когда к примеру есть пункт в меню Contact.php и тд ( а таких файлов штук 30) они находится в другой папке, т.е не рядом с nav.php(навигация сайта) и index.php.К примеру я перехожу с навигации в contact.php просто указывая пусть road/contact.php (так и указан путь в nav.php) и когда я уже на этой странице еще раз выбираю пункт в меню contact.php то вылезает ошибка что путь неправильный… Поскольку относительно contact.php путь до файла будет проще, просто contact.php.....? Как правильно все сделать в этом случае? Понимаю тяжело для понимания, но все же…
        Спасибо!
        
        Александр Мальцев
        
        10 октября 2020, 06:42
        
        Это можно сделать не только с помощью PHP, но и другими способами. Несколько из них приведены в этой теме.
        
        Антон
        
        08 октября 2020, 14:18
        
        Благодарю! =)
nikollays

11 февраля 2019, 16:50

Подскажите, можно внедрить аккордеон, на Joomla, и как это сделать
1. Александр Мальцев
  
  12 февраля 2019, 15:11
  
  Точно не подскажу, т.к. его не использую.
Ivan

15 января 2019, 18:13

Насколько я понял, аккордеон не поддерживает возможности многоуровневого вложения, типа:
КАТАЛОГ ТОВАРОВ
-Раздел каталога 1
--Подраздел каталога 1
--Подраздел каталога 1
-Раздел каталога 2
--Подраздел каталога 2
--Подраздел каталога 2

Как усовершенствовать?
1. Александр Мальцев
  
  20 января 2019, 07:56
  
  Добавил, как это выполнить в статью.
Nik

09 ноября 2018, 13:59

В общем разобрался, у меня как всегда — сначала задаю вопрос, потом сам же на него и отвечаю. Все дело в правильном расположении «col-sm». Не знаю, как сюда загрузить код чтобы показать это. Теперь все работает правильно. Скриншот.
1. Александр Мальцев
  
  09 ноября 2018, 15:25
  
  Тут тоже два варианта набросал:
  1. JavaScript сценарий как в тексте статьи — itchief.ru/examples/lab.php?topic=javascript&file=accordion-5
  2. Переработанный JavaScript сценарий (на прототипах) — itchief.ru/examples/lab.php?topic=javascript&file=accordion-4
2. Александр Мальцев
  
  09 ноября 2018, 15:19
  
  Можешь отправить по почте (добавлю как пример).
  1. Nik
    
    09 ноября 2018, 15:40
    
    Отправил, все варианты пригодятся. Спасибо большое за ответы!
    1. Александр Мальцев
      
      09 ноября 2018, 15:51
      
      Пример от Nik: itchief.ru/examples/lab.php?topic=javascript&file=accordion-6
Nik

08 ноября 2018, 14:40

Подскажите пожалуйста как сделать вертикальный аккордеон в две колонки?
Т.е разместить в принципе в две колонки не проблема, с помощью row и col-sm можно, но работает при этом он не так как надо. Например, в одной колонке 5 блоков и в другой 5 блоков, при открытии например блока с левой стороны, открывается блок и в правой колонке, что в принципе не так. Как сделать чтобы открытие вкладки в одной колонке, не влияло на соседнюю колонку. Вот пример как должно работать — Аккордеон в две колонки, но там один скрипт и ничего более