Question

I am looking to change the content of this span tag:

<span class="ui-btn-text" id="btnText">Read how we have helped</span>

To:

<span class="ui-btn-text" id="btnText">Hide Story</span>

This is what I got so far:

$('#storyBtn').click(function() {
        $('#story-body').slideToggle('fast', function() {
            $('#btnTextShow').hide();
            $('#btnTextHide').show();
        });
    });

Answer 1

Here is a great example on how to achieve this:
First look at the JSFiddle DEMO

Let’s see what we have here:

$('.ui-btn-text:eq(1)').hide();

$('#storyBtn').click(function() {
    $("#story-body").slideToggle(400);
    $(".ui-btn-text").toggle(300);
});

And the html:

<div id="storyBtn">
    <span class="ui-btn-text">Read how we have helped</span>
    <span class="ui-btn-text">Hide Story</span>
</div>

<div id="story-body">
    A long,...<br> long time ago...
</div>

INFO:

As you can see I simplified and removed all the unnecessary ID’s and codes JUST TO MAKE VISIBLE HOW SIMPLE CAN ALL BE. You can redo this changes of mine.