title: elements with the same class name in javascript
body: <p>Im new to javascript because I skipped it and jumped to jquery and now Im writing a javascript code but I'm having trouble. I have multiple elements with the same class name and below each element is an a-tag. i want to hide/show the element upon clicking the button below it. How can i do this in javascript? (no jquery please).<br><br>
  HTML</p>
  
  <pre><code>&lt;div&gt;
   &lt;div class="content"&gt;content 1&lt;/div&gt;
   &lt;a class="show-more" onclick="toggleText();" href="javascript:void(0);"&gt;Show more&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;div class="content"&gt;content 2&lt;/div&gt;
   &lt;a class="show-more" onclick="toggleText();" href="javascript:void(0);"&gt;Show more&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;div class="content"&gt;content 3&lt;/div&gt;
   &lt;a class="show-more" onclick="toggleText();" href="javascript:void(0);"&gt;Show more&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS<br></p>
  
  <pre><code>.content {
   display: none;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>  var status = "less";
    function toggleText1() {
      if (status == "less") {
        document.getElementsByClassName("content")[0].style.display = 'block';
        document.getElementsByClassName("show-more")[0].innerText = "See Less";
        status1 = "more";
      } else if (status1 == "more") {
        document.getElementsByClassName("content")[0].style.display = 'none';
        document.getElementsByClassName("show-more")[0].innerText = "See More";
        status1 = "less";
      }   
    }
  </code></pre>
  
  <p>in my original code i named my content as content1,content2 and my a-tag as show-more1,show-more2 then my functions as toggleText1,toggleText2 and so on. It works but i find it inefficient. Can you guys guide me to the right path?</p>