Question

I am developing MVC application and using razor syntax.

In this application I am giving comment facility.

I use

show comments

para.

<p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show Comments</p>

Now , when user click on ‘Show comments’ , I toggle the Div , In that div I show comments.

Now , I want to change the Text of the para To ‘Hide Comment’ from ‘Show Comments’ ,
When user click on that para.

but I am unable to change the text to ‘Hide comments’…It keep showing ‘Show Comments’
How to do that ?

my code is….

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");
            if ($('.ShowComments').text = "Show Comments"
            {
               $('.ShowComments').text('Hide');
            }
            else
            {
               $('.ShowComments').text('Show Comments');
            }
        });
    });
</script>

Answer 1

You can use a callback function to .text() method like below and ease you code.

$(document).ready(function() {
    $(".ShowComments").click(function() {

        $(".ParentBlock").slideToggle("slow");

        // here instead of .ShowComments you should use
        // this, where this refers to clicked element

        $(this).text(function(i, oldText) {
            return oldText == 'Show Comments' ? 'Hide' : 'Show Comments';
        });
    });
});​