jQuery animate working in fiddle but not smooth online

Question

I\'ve made a sort of accordion with three expanding divs (#a, #b, #c) in fiddle, but when I save it locally and open it in a browser t

Answer 1

Try this

window.onload = function() {
    [].forEach.call(document.querySelectorAll('.inner'), function(el) {
      el.addEventListener('click', function(e) {
        this.parentElement.className = 'middle ' + this.id;
      });
    });

  } //]]>

div.inner {
  max-width: 0;
  display: table-cell;
  overflow: hidden;
}
div.outer {
  display: table;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.middle {
  display: table-row;
  overflow: hidden;
}
#holder {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  position: fixed;
}
#a {
  height: 100%;
  background-color: red;
}
#b {
  height: 100%;
  background-color: blue;
}
#c {
  height: 100%;
  background-color: green;
}
#a,
#b,
#c {
  width: 10%;
  opacity: 0.6;
  transition: all 3000ms;
}
.middle.a #a,
.middle.b #b,
.middle.c #c {
  width: 80%;
  opacity: 1;
}
.wrapper {
  height: 90vh;
  overflow: hidden;
}

  
  


  

    

      

        
1
        
2
        
3