title: Why my JS function automatically fires without click?
body: <p>Basically i would like to toggle class of 'active'. and I want all JS related codes in my main.js file.
  I mean I dont want my #readmore button to has onClick=toggle() inside its attribute. onClick method works fine, toggles my 'active' class. But the problem is without doing it.
  When I use code below, it automatically adds 'active' class to .container and doesnt removes when I click on #readmore. By the way, i dont want to use jQuery.<br></p>
  <p>My <strong>CODE</strong>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myBtn = document.querySelector("#readmore");
  
  myBtn.addEventListener("click", toggle());
  
  function toggle() {
     document.querySelector(".container").classList.toggle('active');
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="content"&gt;
     &lt;h2&gt;
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, modi! Ipsum ab non voluptas facilis maxime architecto nulla consectetur recusandae.
     &lt;/h2&gt;
     &lt;img src="img/img4.jpg" alt="" width="600px"&gt;
     &lt;a href="#" id="readmore"&gt;Read More&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>