Показать/скрыть блок, которого нет в верстке кликом по кнопке?

Question

[Чёкатилло]

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

Как открыть/закрыть блок из плагина не имея его в верстке, кроме кнопки?
Видимо, воздействием на стили блока

Спасибо!

Answer 1

[Matvey]

Как бы что ни было расположено, все дом элементы вбирает в себя объект document. Через него и обратитесь, если знаете класс блока, или id, например:

var block = document.querySelector('.имя_класса_блока');
// var block = document.querySelector('#id_блока');

button.onclick = function() {
  if (!block) {
    return;
  }

  block.classList.toggle('hide');
};

Где класс .hide содержит стиль для сокрытия, display: none; например

Comments

[Чёкатилло]

Спасибо А здесь в скобках имя кнопки? )
function(имя_кнопки)

[Павел Корнилов]

Или вовсе без классов обойтись:

var block = document.querySelector('.имя_класса_блока');
// var block = document.querySelector('#id_блока');

button.onclick = function() {
  if (!block) {
    return;
  }

  block.hidden= !block.hidden;
};

[Чёкатилло]

KorniloFF: блин, да прикольно Точно получается, но я не дружу со скриптами и не пойму где кнопка, по которой вызываются действия скрыть/показать блок )))))))))))) Чувствую, подход прям - что нужно ))

[Павел Корнилов]

Баба Маша:

var block = document.querySelector('#id_блока');
var button= document.querySelector('#id_кнопки');

button.onclick = function() {
  if (!block) {
    return;
  }

  block.hidden= !block.hidden;
};

[Чёкатилло]

KorniloFF: Большое спасибо Работает- клэ!

[Павел Корнилов]

На здоровье, рад был помочь.

[Чёкатилло]

KorniloFF: а не могли бы Вы дописать скрипт так, что бы закрыть блок можно было по другой кнопке, которая будет внутри этой? Внутри этой, потому что негде, как я понимаю...или псевдоэлементом закрываемого/открываемого блока Могу создать новый вопрос

[Чёкатилло]

KorniloFF: Закрыть блок по клику на «крестик»?

[Павел Корнилов]

Ответил.

Answer 2

[Денис Юдин]

Можно по-подробнее описать задачу:

1. Где располагается кнопка?
   
2. Что значит "сам скрываемый/показываемый блок находится в плагине Вордпресс" - плагин WordPress создает DOM-элемент по какому-то событию?
   

PS в идеале - лучше живую ссылку на страницу скинуть - так сразу все будет понятно.
PPS если в document нет требуемого DOM-элемента (который "в плагине"), то показать\скрыть этот элемент можно только путем влияния на плагин - принудительно выполнять функции плагина, которые создают\скрывают необходимый DOM-элемент, CSS в этом случае вообще не помогут.