Not able to reverse changes to HTML DOM style on close button

Question

I have 4 divs with bootstrap col-md-3 class. When clicked on any Div, I am expanding width of that div to 100%, showing expanded contents and hiding(display:none) other divs.

On close button, I want to reverse changes, so I am trying to assign 25% width, hinding expanded contents and making other divs visible(display:block).

But changes are not getting reflected.

function openTab(tab) {
  var i, x, y;
  x = document.getElementsByClassName("containerTab");
  y = document.getElementsByClassName("OuterTab");
 
  for (i = 0; i < x.length; i++) 
  { 
  if(i==tab-1)
  {
   
   y[i].style.width="100%";
   y[i].style.transition= "width 0.5s ease-in";
   x[i].style.maxHeight="5000px";
   x[i].style.transition= "max-height 1s ease-in";
  }
  else
  {
   y[i].style.display="none";
  }
  }
}

function closeTab(tab)
{
 var i, x, y,z, a;
 x = document.getElementsByClassName("containerTab");
    y = document.getElementsByClassName("OuterTab");
 
   for (i = 0; i < x.length; i++) 
   { 
   if(i==tab-1)
   {
    y[i].style.width= "25%";  
    y[i].style.transition= "width 0.5s ease-in";
    x[i].style.maxHeight = "0px";
    x[i].style.transition= "max-height 1s ease-in";
   }
   else
   {
    y[i].style.display = "block";
   }
   }

}

.border1{border: 1px solid; border-radius: 5px;padding:2px}
.border2{border: 1px solid; border-radius: 7px;padding:10px}
.containerTab {
  cursor: pointer;
  color: black;
  max-height: 0;
  min-height:0;
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
<div class="row">
 <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);" style="">
  <div class="border1">
   <div class="border2">       
    content 1
   </div>
   <div id="b1" class="containerTab" style="">
     Expanded content 1
    <div><button onclick="closeTab(1)">Close</button></div> 
   </div>
  </div>
 </div>
 
 <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);" style="">
  <div class="border1">
   <div class="border2"> 
    content 2
   </div>
   <div id="b2" class="containerTab" style="width:100%;">
    Expanded content 2
    <div><button onclick="closeTab(1)">Close</button></div> 
   </div>   
  </div>
 </div>
 <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);" style="">
  <div class="border1">
   <div class="border2"> 
    content 3
   </div>
   <div id="b3" class="containerTab" style="width:100%;">
     Expanded content 3
     <div><button onclick="closeTab(1)">Close</button></div> 
   </div>   
  </div>
 </div> 
 
 <div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);" style="">
  <div class="border1">
   <div class="border2"> 
    content 4
   </div>
   <div id="b3" class="containerTab" style="width:100%;">
     Expanded content 4
     <div><button onclick="closeTab(1)">Close</button></div> 
   </div>    
  </div>
 </div>     
</div>

you are doing this the wrong way. Use classes that you remove hide and control the style using CSS — Temani Afif, Jan 30 '19 at 15:59
Still not working. If removed the class, when function call gets complete, it gets added again.any Idea why? — Vrushali, Jan 30 '19 at 18:09

score 0 · Answer 1 · answered Jan 30 '19 at 15:58

0

Instead of re-applying the individual styles. Apply the new styles by simply adding a CSS class. Then on the click of the Close button, simply remove that class, which will cause the affected elements to revert to their previous style.

answered Jan 30 '19 at 15:58

Scott Marcus

64,069
6
49
71

Still not working. If removed the class, when function call gets complete, it gets added again.any Idea why? – Vrushali Jan 30 '19 at 17:39

score 0 · Accepted Answer · answered Jan 30 '19 at 19:49

addClass and removeClass in jQuery - not removing class

Got answer in this post. Seems the problem was due to event bubbling as close button was inside clickable div, both closetab tab and opentab events were getting called. Worked fine when moved "close" button outside div.

Not able to reverse changes to HTML DOM style on close button

2 Answers2