How to add addEventListener to from parent to child in pure Javasvript?

Question

I need your help. My code structure is like this:

<div class="header">
  <p>Button</p>
  <ul>
    <li>Option 1</>
    <li>Option 2</>
    <li>Option 3</>
  </ul>
</div>

I want to use addEventListener here on the p tag, on clicking it we need to hide and show ul.

This is one of my friends challenge question, please anyone help me how to achieve this. p tag is inside header class. I cannot change the format, need to implement like this. I want to use pure Javascript for this problem

Codepen Link:

Answer 1

Select the DOM through the selector, add click events, switch variables

const header = document.querySelector('.header')
const btn = header.querySelector('p')
const ul = header.querySelector('ul')
let isShow = false
btn.addEventListener('click', () => {
  isShow = !isShow
  ul.style.display = isShow ? 'none' : 'block'
})

<div class="header"> <p>Button</p> <ul> <li>Option 1</> <li>Option 2</> <li>Option 3</> </ul> </div>