I am trying to create a button that will show a list of elements. Within this list, there is another button that can be used to either close the list or hide it entirely. However, for some reason, my code is not functioning properly.
let btn1 = document.querySelector('#btn1');
let btn2 = document.querySelector('#btn2');
let article = document.querySelector('article');
btn1.addEventListener('click', (e) => {
article.style.display = 'flex';
})
btn2.addEventListener('click', (e) => {
article.style.display = 'none';
})div {
position: relative;
width: 100px;
height: 100px;
background-color: white;
}
article {
position: absolute;
left: 100px;
display: none;
flex-direction: column;
}
p {
color: red;
}
span {
position: absolute;
right: -100px;
color: white;
}<div id="btn1">
<article>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<span id="btn2">btn2</span>
</article>
</div>This is important