Toggle On Off

by Laurie

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div></div>
<a href="#" id="showMore"><i class="fa fa-toggle-on fa-2x" ></i>Hide</a>

CSS

div{
   width:200px;
    height:200px;
    background-color:blue;
}

JavaScript

$('#showMore').toggle(
function() {
    $(this).html('<a href="#"><i class="fa fa-toggle-off fa-2x" ></i>Show</a>');
    $( "div" ).slideToggle( "slow" );
    
}, function() {
    $(this).html('<a href="#"><i class="fa fa-toggle-on fa-2x" ></i>Hide</a>');
    $( "div" ).slideToggle( "slow" );
});