Toggle icon with CSS3 + JQuery - Andrew Pougher

Toggle icon with CSS3 + JQuery

by rarteaga

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<table class="table table-condensed table-hover tablesorter" style="width:100%" id="table">
                <thead>
                    <tr style="background-color:lightgray">
                    <th class="text-center">Número<a href="#" class='glyphicon glyphicon-sort rotate'></a></th>
                        <th class="text-center">Nombre<a href="#" class='glyphicon glyphicon-sort rotate'></a></th>
                        <th class="text-center">Nombre Comercial<a href="#" class='glyphicon glyphicon-sort rotate'></a></th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                            <td class="text-center">7</td>
                            <td>Ada Luz Herrera Toledo</td>
                            <td>kiosko 9</td>
                        </tr>
                        </tbody>
            </table>

CSS

.rotate{
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

th a{
    padding-left: 5px;
}

JavaScript

$(".rotate").click(function(){
     $("th").find("a").not($(this)).removeClass("glyphicon-sort-by-attributes-alt glyphicon-sort-by-attributes").addClass("glyphicon-sort");
     if ( $( this ).hasClass( "glyphicon-sort" ) ) {
     		$(this).removeClass("glyphicon-sort");
        $(this).addClass("glyphicon-sort-by-attributes-alt");
    }
     $(this).toggleClass("glyphicon-sort-by-attributes-alt glyphicon-sort-by-attributes"); 
})