切换时jQuery UI幻灯片切换更改按钮

Question

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $('#myDiv').toggle(effect, options, duration);
});

I'm wondering how I can toggle the button to show a new button or text copy in it's place when toggled to 'Read Less'

<center>
<button id="button" class="myButton">Read More</button>
</center>

<div id="myDiv">
<p>Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom.</p>
</div>

Answer 1

$(".myButton").click(function () {
    var self = $(this);
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $('#myDiv').toggle(effect, options, duration, function() {
        if (self.text() == "Read More") {
            self.text('Read Less');
        } else {
            self.text('Read More');
        }
    });
});

FIDDLE