Открыть/закрыть блок id из плагина?

Question

[Чёкатилло]

Блок изначально имеет display: none
Скрипт должен: открывать блок по одной кнопке, а закрывать по другой, но так как, id находится в верстке плагина, а в верстке самой страницы имеется только одна кнопка открытия, эта кнопка закрытия должна находится в открывающемся/закрывающемся id блоке соответственно...а этот id в плагине (плагин обновляется 2 раза в неделю и добавлять кнопку постоянно туда как-то не хочется)

Есть скрипт Хрошо работает, но не совсем то, что надо:

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

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

  block.hidden= !block.hidden;
};

Он только открывает и закрывает id по одной кнопке и еще, если id изначально имеет display: none, то блок так и не откроется, а он должен быть закрыт

Помогите плиз, старенькой бабушке )
Спасибо за внимание!

Answer 1

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

Так ты блоку не display: none присваивай, а атрибут hidden.
<div hidden>...</div>
И все прекрасно заработает!

Comments

[Чёкатилло]

так что бы задать, надо в плагин лезть, а мне надо как-то только скриптом обойтись ) я так понимаю

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

Уф, тогда так:

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

block.hidden=1;

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


  block.hidden= !block.hidden;
};

И убери дисплэй.

[Чёкатилло]

KorniloFF: ок )) Но вот еще одна фишка...что бы крестик закрытия был в открытом только id блоке плагина (как будто кнопка эта находится в id и является дочерним...)Надо или в верстку плагина лезть или вот есть ли вариант вставки кнопки закрытия в id только через скрипт? =)

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

Так всунуть его в блок, вот он и будет виден только тогда, когда сам блок виден.

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

block.hidden=1;
var closeButton= document.createElement('span');
closeButton.style.width= closeButton.style.height= '50px';
closeButton.style.background= 'red';
closeButton.style.color= 'white';
closeButton.textContent= "X";
block.appendChild(closeButton);


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


  block.hidden= !block.hidden;
};

Ну, а положение ее можно уже стилями доработать.

[Чёкатилло]

KorniloFF: Ну все Работает ) Благодарю внучек )

[Чёкатилло]

KorniloFF: Последний вопрос и я отстану ))) Могу ли я через css стилизовать кнопку .closeButton? )

[Exploding]

Баба Маша: Да!
И это был последний вопрос!))

[Чёкатилло]

Exploding: :D :D :D да чет не так оно Если составляю css .closeButton то ничего не меняется

[Exploding]

Баба Маша: Апатамушта это не js и не php и тут надо класс назвать без вхождения заглавных букв. Типа: .close-button

[Чёкатилло]

Exploding: это вроде понял ) Но:

var block = document.querySelector('#rcl-tabs');
var button= document.querySelector('#but');

block.hidden=1;
var closeButton= document.createElement('span');
closeButton.style.width= closeButton.style.height= '50px';
closeButton.style.background= 'red';
closeButton.style.color= 'white';
closeButton.textContent= "X";
block.appendChild(.close-button);


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


  block.hidden= !block.hidden;
};

Ну и кроче, ничего

[Exploding]

Баба Маша: я имел ввиду в названии css класса...
А в js не надо было ничего трогать.
Вот это block.appendChild(.close-button);
Надо вернуть как было block.appendChild(closeButton);

[Чёкатилло]

Exploding: блин звини, что задерживаю ) Но серьезно, вот все, вернул скрипт
в css есть .close-button И ничего )

[Exploding]

Баба Маша: А есть где-то в доступе все это чтоб хоть глянуть что там получается вообще?))) Уже столько времени по крупицам оно там собирается))

[Exploding]

Баба Маша: в css то есть, а у кнопки класса то нет)))

[Exploding]

Баба Маша: closeButton.classList.add('close-button');

[Чёкатилло]

Exploding: урааа Спасибо! ) Это можно увидеть при входе в личный кабинет а вход не настроен )

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

Exploding: спасибо, что помог без меня разобраться.

[Exploding]

KorniloFF: та нз)

[Чёкатилло]

Exploding: KorniloFF: Приглашаю, Вас судари, на рассмотрение вопроса )) Убирать скролл под открывающимся блоком?