.toggleClass not working, no idea why

I am trying to get a div box to expand when clicked, and go back to normal size when clicked again. Seems simple enough, but I can not get it to work no matter what I try. I have no idea what could be going wrong as the part of the code where the error is most likely to be occurring is not very long. Thanks for your time!
https://jsfiddle.net/uL1r08am/

<div id='panelHolder'>
  <div id='panel1' class='panels'></div>
</div>

.panels {
  position:relative;
  border:2px solid silver;
  transition:transform 1.5s;
}

.panels:hover {
  transform:skewY(3deg);
}

#panel1.clicked{
  width:460;
  height:290;
}

$('#panel1').on('click', function() {
    $(this).toggleClass('clicked');
});

$(document).ready(main)