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); 
}); 

我不知道我怎麼可以切換按鈕顯示一個新的按鈕或文本副本時切換到「讀少」

<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