title: CSS transitions with pure Javascript
body: <p>I'm doing a mobile page/ad with 4-5 little info boxes on top of a picture. When touched a box will expand and show text regarding that part of the image. When the next box is touched it will expand and the other currently expanded box will return to default. I need to keep it very light weight so I've been playing with a CSS-only version using the :target pseudo class. It works very well apart from the expected page jump to top.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="page"&gt;
      &lt;a id="button1" href="#button1"&gt;
          btn1
      &lt;/a&gt;
      &lt;a id="button2" href="#button2"&gt;
          btn2
      &lt;/a&gt;
      &lt;a id="button3" href="#button3"&gt;
          btn3
      &lt;/a&gt;
      &lt;a id="button4" href="#button4"&gt;
          btn3
      &lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/negativebyte/93mPg/1/" rel="nofollow">Fiddle</a></p>
  
  <p>To avoid undesired page jump I have concluded that I need to control it with click-events using Javascript. Although it's quite small jQuery lib will eat up my available kB so is not an option. I've spent a few days now browsing the net for solutions to implement some sort of remove/add class function but to no avail. I manage to expand and close the boxes separately but it leaves a cluttered mess when all boxes are open at the same time. I realize I somehow must get it to remove any current instances of the expanded class, but how?</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="page"&gt;
      &lt;div class="box1"&gt;
      &lt;/div&gt;
  
      &lt;div class="box2"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>var hasClass = function (elem, className) {
      return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
  }
  
  var addClass = function (elem, className) {
      if (!hasClass(elem, className)) {
          elem.className += ' ' + className;
      }
  }
  
  var removeClass = function (elem, className) {
      var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
      if (hasClass(elem, className)) {
          while (newClass.indexOf(' ' + className + ' ') &gt;= 0 ) {
              newClass = newClass.replace(' ' + className + ' ', ' ');
          }
          elem.className = newClass.replace(/^\s+|\s+$/g, '');
      }
  }
  
  // Boxes Functions
  if ( 'querySelector' in document &amp;&amp; 'addEventListener' in window ) {
  
      var box1items = document.querySelectorAll('.box1');
      var box2items = document.querySelectorAll('.box2');
  
  
      [].forEach.call(box1items, function (box1) {
  
          box1.addEventListener('click', function(e) {
  
              if ( hasClass(box1, 'box1stage2') ) {
                  removeClass(box1, 'box1stage2');
              }
  
              else {
                  addClass(box1, 'box1stage2');
              }
  
  
  
          }
  
      )
  
      });
  
      [].forEach.call(box2items, function (box2) {
  
          box2.addEventListener('click', function(e) {
  
              if ( hasClass(box2, 'box2stage2') ) {
                  removeClass(box2, 'box2stage2');
              }
  
              else {
                  addClass(box2, 'box2stage2');
              }
  
  
  
          }
  
      )
  
      });
  
  }
  </code></pre>
  
  <p>Any help with this is much appreciated!
  <a href="http://jsfiddle.net/negativebyte/BE4BJ/1/" rel="nofollow">http://jsfiddle.net/negativebyte/BE4BJ/1/</a></p>