Issue With Using Toggle

Issue With Using Toggle

Hello everyone. I'm not sure why this toggle function isn't working. I have a basic arrow with CSS styles that is initially pointing to the right and I want to point it downward on a click event.
  1. <script type="text/javascript">
  2.         $("#arrow-right").click(function() {
                $(this).toggleClass("arrow-down", 1000);
            });
  3. </script>
  1. <style type="text/css">
  2. #arrow-right {
  3.     border-bottom: 12px solid transparent;
  4.     border-left: 12px solid #4a3571;
  5.     border-top: 12px solid transparent;
  6.     position: relative;
  7.     top: 19px;
  8.     left: 37px;
  9.     height: 0;
  10.     width: 0;
  11. }
  12. .arrow-down {
  13.   width: 0;
  14.   height: 0;
  15.   border-left: 12px solid transparent;
  16.   border-right: 12px solid transparent;
  17.   border-top: 12px solid #4a3571;
  18.   position: relative;
  19.   top: 10px;
  20.   left: 22px;
  21. }
  22. </style>

HTML:

  1. <div id="arrow-right" class="arrow-down"></div>

I'm not sure why this isn't working. Does anyone see anything else I'm not doing?