title: jQuery Slidetoggle Rotate 45deg and back
body: <p>I am trying to make the element rotate 45º on click action, the toggle element should open.
  If you click on it again I want it to rotate back and the toggle element should close. </p>
  
  <p>I have tried a lot of codes, I would like to keep it as simple as possible.</p>
  
  <p><a href="http://ricostacruz.com/jquery.transit" rel="nofollow">Plugin I am using</a></p>
  
  <p>jQuery:</p>
  
  <pre><code>$(".category-desc-toggle").click(function () {
      $('.category-desc').slideToggle(300);
      $(".category-desc-toggle").toggleClass("rotate45");
  });
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.rotate45 { 
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg); 
      -moz-transform: rotate(45deg); 
      transform: rotate(45deg);
  }
  .category-desc-toggle { 
      -moz-transition: all .3s; 
      -webkit-transition: all .3s; 
      -o-transition: all .3s; 
      transition: all .3s;
  }
  </code></pre>
  
  <p>What am I doing wrong? Is there an easier way(Less code)?</p>