jquery - jquery show hide toggleでアイコンの矢印を回転させる方法は?

Question

そこの..

---

聞きたい？jquery show hide toggleで矢印アイコンを回転させる方法は? ここで試してみました：http://jsfiddle.net/mikonimations/EzQsG/

<section id="evenmorelinks"><h1><div class="arrow before"></div><a id="show-title" onclick="false">Show More</a><div class="arrow after"></div></h1></section>

<div id="cnt" style="display: none" class="fcolcontainer2">
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Finish block</h2><span><a>333</a></span></div>

このJquery

 (function ($) {
      $(document).ready(function() {
      $("#show-title").click(function () {
         if ($('#cnt').is(":visible")) {
             $(this).html($(this).html().replace(/Hide/, 'Show'));
         } else {
             $(this).html($(this).html().replace(/Show/, 'Hide'));
         }
         // Do it afterwards as the operation is async
         $("#cnt").slideToggle("fast");
      });
  });

しかし成功していません。私を助けてください！ありがとう..