html - JavaScript - collapse element by changing class name -

i have made grid of 9 boxes. on clicking of 9 boxes, 1 clicked, occupies space of entire grid, , displays information within it. now, have made cross @ top right of every grid, which, on being clicked, meant collapse grid original size , occupy previous position. have written pure javascript code it, , inspecting code in browser suggests there nothing wrong code. but, cross button doesn't seem work. below, have mentioned js functions have written. here jsfiddle : https://jsfiddle.net/ag_dhruv/wx7en2kx/
, here folder containing page : goo.gl/qiafc7

function expand (x) { var tester = x.classname.substr(5,7); if(tester != "ex"){ x.classname = x.classname+"ex"; var cross = x.getelementsbyclassname('cross'); (var = 0; < cross.length; i++) {     cross[i].classname = "crossshown"; }; var icon = x.getelementsbyclassname('boxfortitle'); (var j = 0; j < icon.length; j++) {     icon[j].classname = "boxfortitlebig"; }; var info = x.getelementsbyclassname('info'); (var k = 0; k < 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; } 

in collapse() function event bubbling through dom causing expand() function called directly after collapse() function has finished running. because onclick called on child element , onclick called on parent. opens again straight away.

instead of passing this through collapse() pass event object.

e.g collapse(event);

the event object has function on called stoppropagation() stop happening if call @ bottom of function.

function collapse (event) {     var classofparent = event.currenttarget.parentnode.classname;     var newclassname = classofparent.substr(0,5);     event.currenttarget.parentnode.classname = newclassname;     event.stoppropagation(); } 

when tested there few more visual things need in mouse event. hope helps.

additional info: event bubbling , propagation
understanding. bubbling , propagation same thing. how events move through dom. think of event bubble underwater, no matter how deep bubble has go surface.

<div onclick="onparentclick(event);">     <img src="img.jpg" alt="logo" onclick="onchildclick(event);" /> </div> 

if click on child img calls it's onclick , once method has finished event (bubble underwater) has make body element (surface), onclick between , body element called until reaches top. effects parents , children sibling events not called. if click parent div follows same procedure, child div onclick not called bubbles float upwards.

each instance of event has property called bubbles, boolean, tells if event going continue dom tree.

you have 3 main ways interact event instance other default behaviour.

event.stoppropagation(); stops event bubbling dom specific event. e.g stopping propagation onclick not mouseup.

event.stopimmediatepropagation(); stops event bubbling , other event listener on element. e.g calling method stop mouseup firing after onclick.

event.preventdefault(); stops default browser functionality. e.g if want stop browser reacting <a> tag own onclick on it.