title: style.display="block" for event.target element and style.display="none" for other elements
body: <p>I am trying to set the display property to "none" for all elements that has the "option" class, but then I want to extract the element I clicked on and change the display property from "none" back to "block".</p>
  
  <p>I would like to find a solution in vanilla JS.</p>
  
  <pre><code>&lt;h1 class="option" id="header1"&gt;Header 1&lt;/h1&gt;
  &lt;h1 class="option" id="header2"&gt;Header 2&lt;/h1&gt;
  &lt;h1 class="option" id="header3"&gt;Header 3&lt;/h1&gt;
  &lt;h1 class="option" id="header4"&gt;Header 4&lt;/h1&gt;
  &lt;h1 class="option" id="header5"&gt;Header 5&lt;/h1&gt;
  
  document.querySelector('*').addEventListener('click', (event) =&gt; {
      let clickedId = event.target.id;
      let clickedClass = event.target.className;
  
      if (clickedClass === "option") {
          var list = document.querySelectorAll(".option");        
              for (var i = 0; i &lt; list.length; i++) {
                      list[i].style.display = "none";
              };
  
              document.getElementById(clickedId).style.display = "block";
      }
  
      console.log(event.target.style.display);
  });
  </code></pre>
  
  <p>Thanks</p>