Arrow rotate for more/less

Playing around with css transitions to animate arrow changes.

by mark47

HTML

<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<body>
    <div class="container" style="padding: 40px">
        
        <br /><br />
        
        <p>Here's something.</p>
                <div class="show-content hide">
            <p>Details here my friends...<br />
            etails here my friends...<br />
            etails here my friends...<br />
            etails here my friends...<br /></p>
        </div>
        <a href="#" class="trigger-more show-more"><span>See more</span> <i class="icon-chevron-right"></i></a>
        <br /><br />
  
        
        
    </div>
</body>

CSS

a.show-more [class*="icon-"] {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: -webkit-transform, color;
    -moz-transition-property: -moz-transform, color;
    -o-transition-property: -o-transform, color;
    transition-property: transform, color;
}
a.show-open [class*="icon-"] {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform, color;
    -moz-transition-property: -moz-transform, color;
    -o-transition-property: -o-transform, color;
    transition-property: transform, color;
}
a [class*="icon-"] {
    display: inline-block;
}

a.trigger-more:hover {
    text-decoration: none;
}

a.show-more:hover [class*="icon-"] {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform: rotate(90deg);
}

a.show-open [class*="icon-"], a.show-open:hover [class*="icon-"] {
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform: rotate(270deg);
}

JavaScript

$(document).ready(function(){
    $(".trigger-more").click(function() {
        if( $(this).prev("div.show-content").is(":visible") ) {
          $(this).prev("div.show-content").slideUp('slow', function(){
                 //$(this).next('a.trigger-more').removeClass('show-more')   
          });
          $(this).removeClass('show-open').find('span').html('See more');
        } else {
          $(this).addClass('show-open').find('span').html('See less');
          $(this).prev("div.show-content").slideDown('slow');
        }
        return false;
      });

});