Show Hide

by Santosh Thakur

HTML

<h1>Show Hide With Text</h1>

<a href="#" id="showDiv" class="show">Show</a>
<div class="content" style="display:none">Content here</div>

CSS

.show{color:red}
.hide{color:blue}

JavaScript

$(document).ready(function () {
    $("#showDiv").click(function () {
        var txt = 'Hide';
        $(".content").toggle();

        if ($(".content").is(':visible')) {
            txt = 'Hide';
            $("#showDiv").addClass('hide').removeClass('show');
        } else {
            txt = 'Show';
            $("#showDiv").removeClass('hide').addClass('show');            
        }

        $("#showDiv").html(txt);
    });

});