How to change a span's content when other element is clicked

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() {
       开发者_StackOverflow $('#story-body').slideToggle('fast', function() {
            $('#btnTextShow').hide();
            $('#btnTextHide').show();
        });
    });

I think you just want to update the text of the span ... if so try this ->

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

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

*Untested

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.