jQuery UI slide toggle change button on toggle

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>

Tomanow · Accepted Answer · 2014-02-26 21:36:57Z

2

$(".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

answered Feb 26, 2014 at 21:36

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI slide toggle change button on toggle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related