title: Javascript: hide and show text using vanilla javascript
body: <p>I am new in javascript. What I am trying to do is hide and show some text on click using vanilla javascript. I don't know what am I doing wrong here is the code:</p>
  
  <p>this is HTML code:</p>
  
  <pre><code>&lt;p class="h5 font-weight-normal"&gt;some text&lt;span id="toggle-content" class="toggle- 
  content" aria-hidden="true"&gt;some other text&lt;/span&gt;&lt;/p&gt;
  &lt;a class="text-danger toggle-button" aria-controls="toggle-content"&gt;show more&lt;/a&gt;
  </code></pre>
  
  <p>this is javascript code:</p>
  
  <pre><code>const a = document.querySelector('.toggle-button');
  
  if(a){
  a.addEventListener('click', () =&gt; {
  const content = document.querySelector('.toggle-content');
  const ariaHidden = content.getAttribute('aria-hidden');
  
  content.setAttribute('aria-hidden', ariaHidden === 'true' ? 'false' : 'true');
  
  const atext = content.getAttribute('aria-hidden') === 'true' ? 'Show' : 'Hide';
  
  a.innerHTML = `${atext} more`;
  });
  }
  </code></pre>
  
  <p>this is css code:</p>
  
  <pre><code>.toggle-content {
  display: none;
  }
  
  .toggle-content[aria-hidden="false"] {
  display: block;
  }
  </code></pre>