jquery - Trying to toggle a drawer open and closed with javascript -

I use jquery / javascript to change the height of the drawer by 25px, trying to open and close a drawer (Where it is hidden behind another element) for 250px where it is open pop and visible. I have an up-arrow that acts as a button. It opens the drawer because switching class to become a down arrow. Everything in the up-arrow section of the code works; For some reason the down-arrow part is not working and the drawer will not be closed. I suspect a secret that this is because I am trying to add a click event to a class that has not yet been added to the DOM, but I'm not sure that this is correct. Even if this is right then I do not know how to fix it. Any ideas?

  $ ('. Arrow-up'). Click (function ('portfolio-description'). Css ('height', 250); $ ('portfolio-description h2 span'). RemoveClass ('arrow-up'); $ ( 'Portfolio-Description H2 Span'). AddClass ('arrow-down');}); Click $ ('.row-down') (function () {$ ('portfolio-description'). CSS ('height', 25); $ ('portfolio-description H2 span'). AddClass (' Arrow-up '); $ (' Portfolio-Description H2 Span '). RemoveClass (' arrow-down ');}); Try the event delegation, because you are working with dynamic selector values:    
  $ (document) .on ('click', '.arrow-up', function () {$ ('portfolio-description'). CSS ('height', 250) ; $ ('Portfolio-Description H2 Span'). RemoveClass ('arrow-up'); $ ('Portfolio-Description H2 Span') AddClass ('arrow-down');); $ (Document) .on ('click', '.row-down', function () {$ ('portfolio-description'). CSS ('height', 25); $ ('. Portfolio-description H2 span ') .addClass (' arrow-up '); $ (' Portfolio-Description H2 Span '). RemoveClass (' arrow-down ');});