title: JavaScript - collapse element by changing class name
body: <p>I have made a grid of nine boxes. On clicking any of those nine boxes, the one clicked, occupies the space of the entire grid, and displays some information within it. Now, I have also made a cross at the top right of every grid, which, on being clicked, is meant to collapse the grid to its original size and occupy its previous position. I have written the pure JavaScript code for it, and inspecting the code in the browser suggests there is nothing wrong with the code. But, my cross button doesn't seem to work.
  Below, I have mentioned the JS functions I have written.
  Here is the jsFiddle for it : <a href="https://jsfiddle.net/ag_dhruv/wx7en2kx/" rel="nofollow">https://jsfiddle.net/ag_dhruv/wx7en2kx/</a> <br>
  And here is the folder containing my page : goo.gl/Qiafc7 </p>
  
  <pre><code>function expand (x) {
  var tester = x.className.substr(5,7);
  if(tester != "ex"){
  x.className = x.className+"ex";
  var cross = x.getElementsByClassName('cross');
  for (var i = 0; i &lt; cross.length; i++) {
      cross[i].className = "crossshown";
  };
  var icon = x.getElementsByClassName('boxfortitle');
  for (var j = 0; j &lt; icon.length; j++) {
      icon[j].className = "boxfortitlebig";
  };
  var info = x.getElementsByClassName('info');
  for (var k = 0; k &lt; info.length; k++) {
      info[k].className = "infoshown";
  };
  x.id="opened";
  }
  }
  
  function collapse (y) {
  var classOfParent = y.parentNode.className;
  var newClassName = classOfParent.substr(0,5);
  y.parentNode.className = newClassName;
  }
  </code></pre>