title: How do i change the display of my class when active
body: <p>When I click a button&lt; it adds a class of active to slide2, I want to change the style of div named slide1 when slide2 is active but why doesn't it work?</p>
  <p>EDIT:
  codepen : <a href="https://codepen.io/jerico001/pen/poeNKBr" rel="nofollow noreferrer">https://codepen.io/jerico001/pen/poeNKBr</a></p>
  <p>here is my javascript</p>
  <pre><code>&lt;script&gt;
        var next = document.querySelector(&quot;.next&quot;);
        var previous = document.querySelector(&quot;.previous&quot;);
        var slide2 = document.querySelector(&quot;.slide2&quot;);
  
        next.addEventListener(&quot;click&quot;, function () {
          slide2.classList.add(&quot;active&quot;);
        });
  
        previous.addEventListener(&quot;click&quot;, function () {
          slide2.classList.remove(&quot;active&quot;);
        });
      &lt;/script&gt;
  
  .slide2.active {
    display: block;
  }
  
  .slide2.active .slide1 {
    display: none;
  }
  </code></pre>