1

У меня есть аккордеон на бутстрапе, при определённом размере экрана он по дефолту должен быть открыт, при определённом - закрыт.

<button class="btn btn-info footerbutton" data-toggle="collapse" data-target="#footer">
  Раскрыть аккордеон
</button>

<div class="collapse show" id="footer">
  что-то
</div>

Как мне это сделать? Хотел через постоянную проверку условия на js сделать

  if (screen.width<1024) {
    $('#footer').attr('class','collapse hide')
  }

но не знаю как сделать так, чтобы проверка шла постоянно. Подскажите, как можно сделать? Можно ли как нибудь при помощи CSS и медиа запросов сделать?

3
  • У вас же бутстрап используется...посмотрите как на нем это реализовано. Фреймверки не только нужно юзать но и начинку знать. Откройте стили и все увидите сами. Можете поиграться с размерами экрана. Делается это через css 30 авг 2018 в 8:45
  • мне необходимо, чтобы при определённых размерах удалялся класс show, дабы аккордеон был скрыт. бутстраповский аккордеон завязан на этом классе
    – Niko
    30 авг 2018 в 8:54
  • просто изменить что то у класса show не получается
    – Niko
    30 авг 2018 в 8:54

2 ответа 2

0

Удаление или добавление класса для определённых размеров экрана можно сделать следующим способом:

var $footer = $('#footer');

$(window).on('load resize', function() {
  if (window.innerWidth < 1024) {

    // Проверяем наличие класса "hide"
    if (!$footer.hasClass('hide')) {

        // Устанавливаем новые классы
        $footer.attr('class', 'collapse hide');
    }
  }
  else {
    // Проверяем наличие класса "show"
    if (!$footer.hasClass('show')) {

        // Устанавливаем новые классы
        $footer.attr('class', 'collapse show');
    }
  }
});

Эта функция будет выполняться при загрузке страницы и при изменении её размера.

1
  • спасибо, то что надо
    – Niko
    30 авг 2018 в 12:51
-1

Чистый CSS и media запросы

@media (max-width:454px) {
    /* тут прописываете css */
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.