title: Using JS to toggle between two HTML Elements
body: <p>Looking to make an interactive landing page, and I would like visitors to click on a HTML element, which then disappears and is replaced by another. </p>
  
  <p>I've included the code below for your review, and the codepen link: <a href="https://codepen.io/riza-khan/pen/pMrWKw" rel="nofollow noreferrer">https://codepen.io/riza-khan/pen/pMrWKw</a></p>
  
  <p>The issue is that the toggle does not work and after multiple clicks both h4 and p tags completely disappear. I've tried switching where the place the .hide class in the CSS (which for some reason makes a difference, and I don't understand why). </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>const switchElements = document.querySelectorAll('.switch');
  
  for(const switchElement of switchElements) {
      switchElement.addEventListener('click', (e) =&gt; {
         e.target.classList.toggle('hide');
         e.target.nextSibling.classList.toggle('hide')
      })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main{
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(2,1fr);
  }   
  .three-points {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: repeat(3,1fr);
      i {
          display:grid;
          justify-content: center;
      }
      h4 {
          display:grid;
          align-content: center;
          justify-content: start;
          border:solid;
      }
    }
  }
  .hide {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="three-points"&gt;
       &lt;i class="fab fa-google fa-5x"&gt;&lt;/i&gt;&lt;h4 class="switch"&gt;SEO Optomized&lt;/h4&gt;&lt;p class="switch hide"&gt;Utilizing best practices to ensure page is ranked appopriately&lt;/p&gt;
        &lt;i class="fa fa-mobile fa-5x"&gt;&lt;/i&gt;&lt;h4 class="switch"&gt;Responsive Design&lt;/h4&gt;&lt;p class="switch hide"&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. At autem culpa possimus facere. Recusandae.&lt;/p&gt;
        &lt;i class="fa fa-window-maximize fa-5x"&gt;&lt;/i&gt;&lt;h4 class="switch"&gt;Elegant Themes&lt;/h4&gt;&lt;p class="switch hide"&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quis consequatur asperiores. Odit, voluptates nihil.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ok so the issue is that the JS is looking for the nextSibling. After the first click, how can I use an if function to remove .hide from the <strong>previousSibling</strong>?</p>
  
  <hr>