title: Event listener on multiple elements with the same class
body: <p>On the site I have a navbar. When I click on the <code>a</code> in navbar I want a new <code>div</code> (with content) appears and everything else "hides". I did it with<code>display: none</code>. In the corner there should be an "X" which closes the div and makes "first screen" appear again.</p>
  
  <p>I did the first part, but have some problems with closing. Here is my code:</p>
  
  <pre><code>const about = document.getElementById('li-about');
  const work = document.getElementById('li-work');
  const contact = document.getElementById('li-contact');
  </code></pre>
  
  <p>^These are links in a navbar.</p>
  
  <pre><code>const openSlide = (id) =&gt; {
  document.querySelector('main article#' + id).style.display = 'block';
  document.querySelector('header').style.display = 'none';
  };
  
  about.addEventListener('click', () =&gt; openSlide('about'));
  work.addEventListener('click', () =&gt; openSlide('work'));
  contact.addEventListener('click', () =&gt; openSlide('contact'));
  </code></pre>
  
  <p>And here is the code. It works. But when I want to do similar thing to a closing div function, it only works with <code>about</code>, not <code>work and contact</code>.</p>
  
  <pre><code>const closeSlide = (id) =&gt; {
  document.querySelector('main article#' + id).style.display = 'none';
  document.querySelector('header').style.display = 'block';
  };
  
  const close = document.querySelector('.close');
  close.addEventListener('click', () =&gt; closeSlide('about'));
  close.addEventListener('click', () =&gt; closeSlide('work'));
  close.addEventListener('click', () =&gt; closeSlide('contact'));
  </code></pre>
  
  <p>Can you tell me why? There is no error in console, I tried to replace <code>closeSlide</code> function with a simple <code>console.log</code> and it doesn't work as well. Is it possible that JavaScript detects only one (first in HTML code) <code>.close</code> div?</p>