Как скрыть блок?

Question

[Никита Сальников]

Здравствуйте. Подскажите как скрыть блок(блок2), который отображается на все странице. Но скрыть его нужно при показе другого блока(блок1), который он перекрывает. То есть нажал кнопку блок1 появился, блок2 скрылся.

Comments

[v3shin]

Ну так и скрыть: при нажатии на кнопку скрыть блок1, а блок2 показать. Без кода нет и конкретики.

[Andrei Alisenok]

Никита Сальников При помощи JS, повесь обработчик на блок1, при нажатии на который блок2 скрывается (display: none)

[Никита Сальников]

v3shin, ok по другому вопрос. как правильно написать код, если у элемента с классом x есть класс active, то блокy y добавить класс active. а потом через css я уже скрою этот блок.

[v3shin]

Никита Сальников, у всех блоков убрать класс, одному добавить.

[Никита Сальников]

Andrey, так правильно?

var b = document.getElementsByClassName('.click_link');
  var c = document.getElementsByClassName('.open');

  b.onclick = function() {
      if (b.hasClass('active')) {
          c.addClass('active');
      } else {
          c.removeClass('active');
      }
  }

[Aleksandr Kritskii]

Никита Сальников, по-другому ответ: проверяете на JS, есть ли у элемента с классом х есть класс active, то блоку y добавляете класс актив

[Никита Сальников]

Aleksandr Kritskii, попробовал выше. посмотрите правильно или нет, пожалуйста.

[Aleksandr Kritskii]

Никита Сальников, нужно начать с уточнения что по итогу вы хотите сделать, а то у вас здесь уже прослеживаются разные варианты
если при клике на блок или кнопку добавлять класс на другой блок, то подойдет вот это

[Никита Сальников]

Aleksandr Kritskii, если у меня на кнопке стоит класс, потому что много таких кнопок, то я должен буду так записать верно?
const button = document.querySelector('.button')

[Aleksandr Kritskii]

Никита Сальников, querySelector

[Никита Сальников]

Aleksandr Kritskii, ага понятно. спасибо.сейчас попробую.

Answer 1

[Сергей Миллер]

Смотря как "скрыт" блок

$('button').on('click', function(){
if($('.block1').is(':visible')){
$('.block1').slideUp(300);
$('.block2').slideDown(300);
}

else{
$('.block1').slideDown(300);
$('.block2').slideUp(300);
}
});

Comments

[Никита Сальников]

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

[Сергей Миллер]

Без Вашего кода мало что можно сказать, если блок2 накладывается поверх блок1 и оба блока идентичного размера, зачем тогда скрывать блок1?

Или у Вас блок1 накладывается на блок2 когда блок2 становится видимым? Если так, то поиграйтесь с position:absolute; z-index:2

Или приведите хотя бы иллюстрации

[Никита Сальников]

Сергей Миллер,
смотрите блок1 - красный перекрывает блок2-синий. точнее находится за ним. блок1 появляется при нажатии на иконку - указал стрелкой. блок2 находится постоянно.
из этого мне нужно реализовать через if else, что если у иконки или блока1 появляется класс active то блоку2 тоже добавить какой нибудь класс. и потом через css я его скрою.
у иконок и блока1 уже реализовано что при клике появляется класс active.

[Сергей Миллер]

Никита Сальников, а если блоку1 (или какой там блок должен быть слоем выше) добавить background: #fff ???

[Никита Сальников]

Сергей Миллер, а зачем? это тоже наверное надо будет через js. там ведь условие выполняется.

[Сергей Миллер]

Никита Сальников, затем чтобы хоть как-то понять что у Вас за разметка, раз Вы упорно не хотите скидывать пример Вашего кода и приходится Ванговать. И почему Вы хотите добавлять css свойство элементу через js? Когда правильней это сделать на css и css неважно есть такой элемент на текущей странице или нет, и будет ли он вообще на сайте или нет

[Никита Сальников]

Сергей Миллер, я не не хочу скидывать пример кода. У меня его просто нет. Я задался вопросом убирать мешающий блок когда открывается нужный. Как мне уже сказали нужно посадить обработчик события с условием. То есть если у иконки или блока появляется класс active, то блоку, который нужно скрыть, добавляется например класс close. И потом я в стилях просто пропишу block2.close{
display:none;
}