Как с помощью Bootstrap 4 сделать аккордеон только для мобильной версии?

Question

[Мар'ян Витак]

Здравствуйте. Подскажите пожалуйста как с помощью Bootstrap 4 сделать аккордеон только для мобильной версии? Сейчас на сайте есть 2 версии footer (что не есть правильно) как с помощью аккордеона именно на Bootstrap 4 сделать его рабочим только при достижении определенной ширины экрана (что-то вроде responsive и unslick в slick.js).

Answer 1

[Иван В]

Bootstrap здесь не нужен.
Сейчас на вашем сайте футеры переключаются с помощью медиа запросов.

@media (max-width: 1400px){
.footer {
    display: none;
  }
  .footer-mobile {
    display: block;
  }
}

Т.е. десктопный футер изсчезает при разрешении менее 1400px, а мобильный включается.
Поменяйте запрос, например, на "media (max-width: 767px)"

Comments

[Мар'ян Витак]

Нет, это и так понятно)) Имеется в виду, чтобы не дублировался код в html файле, чтобы не было footer-mobile вообще, а остался только один footer, у которого при ширине более 1400 нет аккордеона, а при ширине меньше 1400 есть.

[Иван В]

Мар'ян Витак,
Готового решения на Bootstrap я не знаю.
Если в двух словах, то нужно просто сделать чтобы в десктопной версии данные отображались в колонках, а в моб версии эти колонки сворачивались и выглядели как аккордион. Внешний вид в зависимости от размеров экрана меняем медиа запросами, а открытие\закрытие аккордиона делаем с помощью js, который включается при нужном разрешении экрана.
немного времени и js и все получится:)).

[Мар'ян Витак]

Иван В, Сделать аккордеон вручную нетрудно, хотел узнать есть ли подобная функция для адаптации именно на bootstrap 4. Но спасибо за ответ.