Как заставить раскрывающееся меню HTML открываться при загрузке страницы WordPress

Question

У меня есть iFrame, встроенный в мою страницу WordPress (с использованием пользовательского блока HTML) для бронирования сеансов массажа. https://aanmassage.nl/boek-jouw-massage/

iFrame загружается с классом MenuGroup - заголовок - 443090 , содержащий различные виды массажа), но эта группа меню закрыта. При выборе названия группы или шеврона, он открывается, и в раскрывающемся списке отображаются сообщения о массаже.

Для пользователей, которые хотят заказать массаж, это очень отвлекает. Есть ли способ заставить группу открываться по умолчанию? Используя код html, js или css.

Снимок экрана с закрытым меню

Снимок экрана с открытым меню

Answer 1

Может быть, есть опция, которую вы можете редактировать в качестве атрибута для своего iframe? Дело в том, что вам нужен доступ к файлу Javascript для редактирования этого поведения. Но так как вы используете iframe, я думаю, у вас нет прав доступа?

EDIT:

Ну, вы можете вставить это в файл JS, должно работать:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

window.onload = function {
eventFire(document.querySelector('.MenuGroup--header--443090'), 'click');
}

Для этого нужно повторить событие клика на вашем веб-сайте, поэтому при загрузке страницы открывается меню.

EDIT2:

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

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

document.querySelector("iframe").addEventListener( "load", function(e) {
    eventFire(document.querySelector('.MenuGroup--header--443090'), 'click');

} );