Как скрыть flex-контейнер?

Question

[saiasasd]

У меня есть вот такой класс:

.not-active{
display: none;
}

Есть элемент с display: flex. Этот элемент - это панель с настройками.
Мне нужно в JS при помощи classList.toggle переключать класс not-active у этого элемента.
Но браузер не дает это сделать. Если смотреть в F12, то там, когда накидываешь класс not-active, display: none зачеркнуто. Пробовал еще через visability: hidden, но это очень долго (скрывается только через 1 секунду).
Как можно по-другому скрыть flex-контейнер?

Comments

[Ankhena]

Поставьте селекторы в правильном порядке и заодно почитайте про специфичность.

Кроме того, девтулз конкретно показывает почему перебивается то или иное свойство.

[FrelFrloich]

Ankhena, мне с каждым днём всё больше нравятся ваши ответы)

[Alex Khayev]

Задайте правильно правила для данного класса с учетом каскадности, тогда его не будут перекрывать другие правила. Добавьте ему "веса", например задав не как .not-active, а как div.not-active или даже div > div.not-active, тут уже по структуре смотрите.

зы: в самом безобразном случае, если выхода другого нет, можете добавить !important ))) но это плохое решение

Answer 1

[Nekio]

<div class='element'>

</div>

.element{
  display: flex;
  width: 20px;
  height: 20px;
  background-color: #000;
}

.not-active{
  display: none;
}

document.querySelector('.element').classList.toggle('not-active')

Если хотите, чтобы элемент переключал класс по кнопке, то задайте событие для кнопки (click) и вставьте этот кусок js кода туда.