Jquery displaying controls text on screen

This is the code in the script/head:

<script type="text/javascript">

$(function () {


    $('.HideButton').click(function () {



        var theButton = $(this开发者_运维问答);

        $('#disclaimer').slideToggle('slow', function () {
            theButton.val($(this).is(':visible') ? 'Hide' : 'Show');
        });




        return false;
    });
    $('<h2></h2>').html($('#MessageText').val);

});

Code in the body:

    <p  id="disclaimer"  > 

    <input id="MessageText" type="text" /> //I this value to appear in an inserted h2 tag after the button toggles the <p>


</p>

<asp:Button ID="Button21" CssClass="HideButton" runat="server" Text="Hide" />

$('<h2></h2>').html($('#MessageText').val);

val is a method, it should be...

$('<h2></h2>').html($('#MessageText').val());

If I'm reading your question correctly - I think you want the following...

Change:

$(function () {
    $('.HideButton').click(function () {
        var theButton = $(this);

        $('#disclaimer').slideToggle('slow', function () {
            theButton.val($(this).is(':visible') ? 'Hide' : 'Show');
        });

        return false;
    });
    $('<h2></h2>').html($('#MessageText').val);
});

To:

$(function () {
    $('.HideButton').click(function () {
        var theButton = $(this);

        $('#disclaimer').slideToggle('slow', function () {
            theButton.val($(this).is(':visible') ? 'Hide' : 'Show');
        });
        theButton.after($('<h2></h2>').html($('#MessageText').val()));

        return false;
    });
});