Personal - toggle class and text on click

from http://bit.ly/XHOUv0

by panchroma

HTML

<a class="collapse-info btn"><i class="icon-arrow-up icon-white"></i> Hide Info</a>

CSS

.icon-white {
    display: inline-block;
    height: 30px;
    width: 30px;
}

.icon-arrow-up {
    background: red;
}

.icon-arrow-down {
    background: green;
}

JavaScript

$('.collapse-info').toggle(function() {
        //$('.server-info').slideUp();
        $(this).find("i").removeClass("icon-arrow-up").addClass("icon-arrow-down");
        this.childNodes[1].nodeValue = "Show Info";
    }, function () {
        //$('.server-info').slideDown();
        $(this).find("i").removeClass("icon-arrow-down").addClass("icon-arrow-up");
        this.childNodes[1].nodeValue = "Hide Info";
    });