Questions about JavaScript events. I removed the hidden attribute, but it's still on the screen.

Hello. Jinho ^ - ^

I answer your question.

This is because the <li> element was hung with an event. The .button.is-close-panel button is included, which makes Event propagation a <li> element whenever you click the button.

So even if you press the button to perform closeDetail(), the showDetail() function linked to the <li> element immediately runs, so it doesn't seem to disappear.

// <li> See element navigation
var aList = aContext.querySelectorAll(".ediya-menu__item");

for (var i = 0; i < aList.length; i++) {
  // <li> Bind Events to Elements
  aList[i].addEventListener("click", showDetail.bind(this, i));
}

// <li> An event occurs whenever an element is clicked!!!!
function showDetail(index, e) {
  e.preventDefault();
  var dtl = document.querySelectorAll(".ediya-menu__item--detail");
  dtl[index].hidden = false;
  dtl[index].classList.add("is-active");
}

The Caution! <li> element creates an accessibility issue when you associate click events with non-focus elements.

Let me tell you two solutions. The recommended method is the second method in which accessibility is considered.

When clicked, blocks the event propagation with the parent element <li>.

function closeDetail(e) {

  // Stop propagating events: 
  // Stops events from propagating to the parent element.
  e.stopPropagation();

  var parent = this.parentNode;
  parent.hidden = true;
  parent.classList.remove("is-active");
}

Inside <li>, locate the <a> element to associate the event. Event propagation is not affected because the event is not associated with the <li> element.

for (var i = 0; i < aList.length; i++) {
  // Bind events to <li> elements inside <a>.
  aList[i].querySelector('a').addEventListener("click", showDetail.bind(this, i));
}

Caution!In the currently created markup, there is only one <a> element, so you did not use a separate identifier, but it is recommended that you use a separate identifier to distinguish it.