title: how to rotate icon arrow in jquery show hide toggle?
body: <p>there..</p>
  
  <hr>
  
  <p>I want to ask you?
  how to rotate the arrow icon in jquery show hide toggle?
  I've tried it here: <a href="http://jsfiddle.net/mikonimations/EzQsG/" rel="nofollow">http://jsfiddle.net/mikonimations/EzQsG/</a></p>
  
  <pre><code>&lt;section id="evenmorelinks"&gt;&lt;h1&gt;&lt;div class="arrow before"&gt;&lt;/div&gt;&lt;a id="show-title" onclick="false"&gt;Show More&lt;/a&gt;&lt;div class="arrow after"&gt;&lt;/div&gt;&lt;/h1&gt;&lt;/section&gt;
  
  &lt;div id="cnt" style="display: none" class="fcolcontainer2"&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Example block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Example block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Example block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Example block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Example block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="f2segment"&gt;&lt;h2&gt;Finish block&lt;/h2&gt;&lt;span&gt;&lt;a&gt;333&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This Jquery</p>
  
  <pre><code> (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");
        });
    });
  </code></pre>
  
  <p>but have not been successful.
  Please help me!
  Thanks..</p>