title: Readmore/readless content toggle function
body: <p>What I'm trying to accomplish is a java readmore/readless content toggle function that disable other content when one content's onclick triggers. I'm using getElementsByClassName, setTimeout, and transition. </p>
  
  <p>The problem I'm having is that display: none is not responding to setTimeout. Any suggestion outside of javascript is welcome too.</p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>function toggle(cont, tog, id) {
      for (var i = 0; i &lt; cont.length; i++) {
          if (tog[id].innerHTML != "Click Here to Read Less!") {
              /* Toggle On */
              tog[id].innerHTML = "Click Here to Read Less!";
              cont[id].style.height = "250px";
  
              /* Disable other  */
              setTimeout(function () { cont[i].style.display = "none" }, 500);
              setTimeout(function () { tog[i].style.display = "none" }, 500);
  
              for (var x = 0; x &lt; cont.length; x++) {
                  cont[x].style.opacity = "0";
                  tog[x].style.opacity = "0";
                  setTimeout(function () { cont[x].style.display = "none" }, 500);
                  setTimeout(function () { tog[x].style.display = "none" }, 500);
                  if (cont[id] == cont[x]) {
                      cont[id].style.opacity = "1";
                      tog[id].style.opacity = "1";
                  }
              }
          } else {
              /* Toggle Off */
              tog[id].innerHTML = "Click Here to Read More!";
              cont[id].style.height = "100px";
  
              /* Enable other */
              for (var x = 0; x &lt; cont.length; x++) {
                  cont[x].style.opacity = "1";
                  tog[x].style.opacity = "1";
                  cont[x].style.display = "block";
                  tog[x].style.display = "block";
              }
          }
      }
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>        &lt;div class="content"&gt;
          &lt;p&gt;
              Content Here!
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 0)" class="readtoggle"&gt;Click Here to Read More!&lt;/a&gt;
  
      &lt;div class="content"&gt;
          &lt;p&gt;
              Content Here!
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 1)" class="readtoggle"&gt;Click Here to Read More!&lt;/a&gt;
  
      &lt;div class="content"&gt;
          &lt;p&gt;
              Content Here!
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 2)" class="readtoggle"&gt;Click Here to Read More!&lt;/a&gt;
  </code></pre>
  
  <p>And CSS for formatting sake:</p>
  
  <pre><code>/* Centering Content */
      #wrapper {
          margin: 0 auto;
          height: auto;
          width: 70%;
  
          text-align: center;
          font-family: Sans-Serif, Calibri;
          }
  
      /* Styling Content */
      .content {
          padding: 25px 50px;
          margin: 0 auto;
          height: 100px;
          width: 500px;
  
          display: block;
          text-align: left;
          overflow: hidden;
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          }
  </code></pre>